GatsbyJS + Netlify CMS Issue with relative path - 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.