GatsbyJS + Netlify CMS Issue with relative path

Question

I am trying to add new projects to my GatsbyJS site using Netlify CMS. The problem is that my code is using relative path to reach the thumb images but when uploading a new thumb image from netlify it saves it as an absolute path. This is causing a problem and I dont understand what it is exactly. Is Gatsby not able to read the absolute path that is being received from the CMS? If that could be the problem, how could i make that the CMS gives me a relative path?

Any help will be much appreciated :)

This is the path in my markdown files:

thumb: ../images/thumbs/memory.png

This is the path created by the CMS:

/src/images/thumbs/img_2370.jpg

This is my config.yml

    backend:
  name: git-gateway
  branch: master # Branch to update (optional; defaults to master)

publish_mode: editorial_workflow

media_folder: "src/images/thumbs"

collections:
  - name: "projects" # Used in routes, e.g., /admin/collections/blog
    label: "Projects" # Used in the UI
    folder: "src/projects" # The path to the folder where the documents are stored
    create: true # Allow users to create new documents in this collection
    slug: "{{slug}}" # Filename template, e.g., YYYY-MM-DD-title.md
    fields: # The fields for each document, usually in front matter
      - { label: "Title", name: "title", widget: "string" }
      - { label: "Stack", name: "stack", widget: "string" }
      - { label: "Slug", name: "slug", widget: "string" }
      - { label: "Url", name: "url", widget: "string" }
      - { label: "Publish Date", name: "date", widget: "datetime" }
      - { label: "Thumb", name: "thumb", widget: "image" }
      - { label: "Body", name: "body", widget: "markdown" }

Answer 1

This is a "known issue" that Netlify should fix soon (it has been 2 years since it has been spotted so far). Netlify doesn't support relative paths hence the image paths are broken.

Consider using the following solutions:

• gatsby-plugin-netlify-cms-paths adding the following in your gatsby-config.js:

  module.exports = {
     plugins: [
  
       // Including in your Gatsby plugins will transform any paths in your frontmatter
       `gatsby-plugin-netlify-cms-paths`,
  
       // Including in your Remark plugins will transform any paths in your markdown body
       {
         resolve: `gatsby-transformer-remark`,
         options: {
           plugins: [
             `gatsby-plugin-netlify-cms-paths`,
           ],
         },
       },
     ],
  }
  

• gatsby-remark-relative-images-v2 by adding:

     {
       resolve: `gatsby-transformer-remark`,
       options: {
         plugins: [
           // gatsby-remark-relative-images-v2 must
           // go before gatsby-remark-images
           {
             resolve: `gatsby-remark-relative-images-v2`,
           },
           {
             resolve: `gatsby-remark-images`,
             options: {
               // It's important to specify the maxWidth (in pixels) of
               // the content container as this plugin uses this as the
               // base for generating different widths of each image.
               maxWidth: 590,
             },
           },
         ],
       },
     },
  

• Check that media_folder and public_folder are properly configured:

  media_folder: src/images/thumbs
  public_folder: /images/thumbs
  

  Note the starting slash in the public_folder and double-check that those are the correct ones.