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" }

user_5585371 · Answer

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.

GatsbyJS + Netlify CMS Issue with relative path

1 Answers