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 Ferran Buireu · Accepted Answer · 2021-02-26T10:15:28

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

Images not showing on NetlifyCMS and GatsbyJS

1 Answers