Images not showing on NetlifyCMS and GatsbyJS

Question

I can't get images to work on my blog which is using NetlifyCMS and GatsbyJS I'm not sure what I'm doing wrong.

Here is my config for NetlifyCMS

 backend:
      name: git-gateway
      branch: master
    publish_mode: editorial_workflow
   media_folder: '../common/src/assets/images/uploads'
   #public_folder: '../common/src/assets/images/uploads'

Collections articles

folder: 'packages/common/src/articles'

Gasbyjs Config for the CMS

{
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `articles`,
        path: `../common/src/articles`
      }
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `../common/src/assets/images/uploads`
      }
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `common-images`,
        path: `../common/src/assets/images/uploads`
      }
    },

My gatsby's config for files

{
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `common`,
        path: `../common/src/assets/`
      }
    },
    `gatsby-transformer-json`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `data`,
        path: `../common/src/data/`
      }
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `../common/src/assets/images/favicon.png` // This path is relative to the root of the site.
      }
    },

and my project folder

Ferran Buireu · Accepted Answer · 2021-02-26T11:24:48.637

2

Change the config.yml paths from:

 backend:
   name: git-gateway
   branch: master
   publish_mode: editorial_workflow
   media_folder: '../common/src/assets/images/uploads'
   #public_folder: '../common/src/assets/images/uploads'

To something similar to:

   name: git-gateway
   branch: master
   publish_mode: editorial_workflow
   media_folder: 'static/assets/images/uploads'
   public_folder: '/assets/images/uploads'

Note: I would hardly avoid relative paths in these media configurations. Of course, adapt it to your needs but keep the /static folder present for the media_folder and the slash (/) at the beginning of public_folder.

You will need to use the static folder approach since it's the only way to make external images be accessible from /public folder requests, as you can see in the guide provided by Netlify:

media_folder: static/img
public_folder: /img

edited Feb 26 '21 at 11:24

answered Feb 26 '21 at 10:15

Ferran Buireu

28,630
6
39
67

I thought the public folder should have the static I don't have a static folder in common? – Almog Feb 26 '21 at 10:27
All the images in common/assets/images/portfolio are generated to http://localhost:8000/static/ – Almog Feb 26 '21 at 10:29
`static` folder must be placed in the root of the project. The public folder is generated once the code is compiled – Ferran Buireu Feb 26 '21 at 10:42
The project is set up a bit different – Almog Feb 26 '21 at 10:46
Either way, you need to notify Netlify where those assets are, so the static folder must be present in the configuration – Ferran Buireu Feb 26 '21 at 10:47
Yes but I did that, all my images are in the project are at packages/common/src/assets/images I upload all blog files to packages/common/src/assets/images/uploads That is working but the images are not showing on the site – Almog Feb 26 '21 at 10:57
When you run gatsby build it supposed to then put them in packages/landing-gatsby/public/static – Almog Feb 26 '21 at 10:58
If the config.yml is set as I wrote and the images are being saved correctly in the public folder, what is missing if the relativity of the paths in the sources – Ferran Buireu Feb 26 '21 at 11:07
What you wrote is not working and can't be right you wrote " media_folder: 'static/common/src/assets/images/uploads'" the media folder is where files are stored in the repo in my project all files are at common/src/assets/images/uploads – Almog Feb 26 '21 at 11:12
It's quite simple. If you want to use images in Gatsby + Netlify you **must** change your media and public folders to what I wrote. Based and focus on the examples provided: https://www.netlifycms.org/docs/configuration-options/#media-and-public-folders This is because the approach needs to be through /static folder, otherwise, your code won't know where are the images and the paths will break. Adapt the paths I wrote to your needs, the important part is to use the /static folder. – Ferran Buireu Feb 26 '21 at 11:19
Images work fine for all my site just not the blog, so Gatsby + Netlify are setups correctly its something to do with how NetlifyCMS is setup – Almog Feb 26 '21 at 11:29
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/229244/discussion-between-ferran-buireu-and-almog-koren). – Ferran Buireu Feb 26 '21 at 11:30
For some reason it's trying to find images here after a publish a new post https://almog.io/blog/screen-shot-2021-02-26-at-11.47.32-am.png and I have this public_folder: '/packages/landing-gatsby/public/static' Maybe its needs to be public_folder: '/packages/landing-gatsby/public/static/images' – Almog Feb 26 '21 at 11:34

Images not showing on NetlifyCMS and GatsbyJS

1 Answers1