Image src on the body post

First, it’s about a blog with netilify and gatsby. I have a common blog, the post have a tile, slug, banner/top image and a body, that is a markdown.
The banner’s src is correctly translated from ‘static/images/image_name.png’ to ‘static/[hash]/[hash] /image_name.png’, but the image in the body not.
I’m using gatsby-transformer-remark to translate the markdown to html. The field declared as the name being ‘body’ is translated into html, and then the src of every img tag should be translated correctly.

Captura de Tela 2020-04-01 às 09.30.52

I follow the docs describe in the plugins for gatsby-transformer-remark, gatsby-remark-relative-images and gatsby-remark-images. What can I have set up wrong?

config.yml

backend:
  name:  git-gateway
  repo: ###
  branch: ###

media_folder: "static/images"
public_folder: "static/images"

collections:
  - name: "blog"
    label: "Blog"
    folder: "content/blog"
    create: true
    slug: "{{year}}-{{month}}-{{day}}-{{slug}}"
    fields:
      - {label: "Layout", name: "layout", widget: "hidden", default: "blog"}
      - {label: "Title", name: "title", widget: "string"}
      - {label: "Publish Date", name: "date", widget: "datetime"}
      - {label: "Image", name: "image", widget: "image"}
      - {label: "Description", name: "description", widget: "markdown"}
      - {label: "Keywords", name: "keywords", widget: "string"}
      - {label: "Body", name: "body", widget: "markdown"}
      - label: "Post Author"
        name: "author"
        widget: "relation"
        collection: "authors"
        searchFields: ["title"]
        valueField: "title"
      - label: "Related Categories"
        name: "categories"
        widget: "relation"
        collection: "categories"
        searchFields: ["title"]
        valueField: "title"
        multiple: true
      - label: "Call to Action"
        name: "call"
        widget: "object"
        fields:
          - {label: "Url", name: "url", widget: "string"}
          - {label: "Banner", name: "banner", widget: "image"}
          - {label: "Aria Label", name: "aria", widget: "string", required: false}
  - name: "authors"
    label: "Authors"
    folder: "content/authors"
    create: true
    slug: "{{year}}-{{month}}-{{day}}-{{name}}-author"
    fields:
    - {label: "Full Name", name: "title", widget: "string"}
  - name: "categories"
    label: "Post Categories"
    folder: "content/categories"
    create: true
    slug : "{{year}}-{{month}}-{{day}}-{{name}}-category"
    fields:
    - {label: "Category Name", name: "title", widget: "string"}

gatsby-config.js

const netlifyCmsPaths = {
  resolve: `gatsby-plugin-netlify-cms-paths`,
  options: {
      cmsConfig: `/static/admin/config.yml`,
  },
}

module.exports = {
  siteMetadata: {
    title: `###`,
    description: `###`,
    author: `####`,
  },
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/static/images`,
      },
    },
    netlifyCmsPaths,
    `gatsby-plugin-netlify-cms`,
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `content`,
        path: `${__dirname}/content/blog`,
      },
    },
    'gatsby-plugin-sharp',
    'gatsby-transformer-sharp',
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
           "gatsby-remark-relative-images",
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 1500,
            }
          },
          {
            resolve: `gatsby-remark-image-attributes`,
          },
          `gatsby-remark-lazy-load`,
        ],
      },
    },

    '@bumped-inc/gatsby-plugin-optional-chaining',
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `src/assets/images/icon.png`, // This path is relative to the root of the site.
      },
    },
    `gatsby-plugin-sass`,
    {
      resolve: 'gatsby-plugin-eslint',
      options: {
        test: /\.js$|\.jsx$/,
        exclude: /(node_modules|.cache|public|gatsby-*)/,
        stages: ['develop'],
        options: {
          emitWarning: true,
          failOnError: false
        }
      }
    },
    {
      resolve: "gatsby-plugin-react-svg",
      options: {
        rule: {
          include: /src\/assets\/images\/svg/
        }
      }
    }
    // this (optional) plugin enables Progressive Web App + Offline functionality
    // To learn more, visit: https://gatsby.dev/offline
    // `gatsby-plugin-offline`,
  ],
}

gatsby-node,js

const path = require('path');

const { createFilePath } = require(`gatsby-source-filesystem`);

const { fmImagesToRelative } = require('gatsby-remark-relative-images');

exports.onCreateNode = ({ node, getNode, actions }) => {
  const { createNodeField } = actions;
  fmImagesToRelative(node);
  if (node.internal.type === 'MarkdownRemark') {
    const slug = createFilePath({
      node,
      getNode,
    });

    createNodeField({
      node,
      name: 'slug',
      value: `/blog/${slug.slice(12)}`,
    });

    const fileNode = getNode(node.parent);
    createNodeField({
      node,
      name: 'sourceInstanceName',
      value: fileNode.sourceInstanceName,
    });
  }
};

// Implement the Gatsby API “createPages”. This is called once the
// data layer is bootstrapped to let plugins create pages from data.
exports.createPages = async ({ graphql, actions, reporter }) => {
  const { createPage } = actions;

  const result = await graphql(`
    {
      posts: allMarkdownRemark(filter: { fields: { sourceInstanceName: { eq: "content" } } }) {
        edges {
          node {
            fields {
              slug
            }
            frontmatter {
              title
              description
              categories
              author
              date
              image {
                childImageSharp {
                  fluid {
                    src
                  }
                }
              }
              keywords
              call {
                aria
                banner {
                  childImageSharp {
                    fluid {
                      src
                    }
                  }
                }
                url
              }
            }
            html
          }
        }
      }
    }
  `);

  const posts = await graphql(`{
    allFile(filter: { sourceInstanceName: { eq: "content" } }) {
      edges {
        node {
          childMarkdownRemark {
            frontmatter {
              date
              title
              description
              author
              image {
                childImageSharp {
                  fluid(maxWidth: 1500) {
                    src
                  }
                }
              }
            }
            fields {
              slug
            }
          }
        }
      }
    }
  }`);

  // Handle errors
  if (result.errors) {
    reporter.panicOnBuild(`Error while running GraphQL query: get post on post view page.`);
    return;
  }
  if (posts.errors || !posts.data) {
    reporter.panicOnBuild(`Error while running GraphQL query: list posts on post view page .`);
    return;
  }

  // Create pages for each markdown file.
  const blogPostTemplate = path.resolve(`src/templates/blog-post.jsx`);
  result.data.posts.edges.forEach(({ node }) => {
    createPage({
      path: node.fields.slug,
      component: blogPostTemplate,
      context: {
        slug: node.fields.slug,
        data: { ...node.frontmatter, html: node.html },
        posts: posts.data.allFile.edges.map(edge => ({
          post: edge.node.childMarkdownRemark.frontmatter,
          slug: edge.node.childMarkdownRemark.fields.slug,
        })),
      },
    });
  });
};

Hi @Davy and welcome :slight_smile:

Not sure what exactly is the issue, but I think Gatsby works better with relative paths in markdown.
You can use this configuration option:
https://www.netlifycms.org/docs/beta-features/#folder-collections-media-and-public-folder

To specify that your images will be saved in the same directory as the post and referenced in the markdown using a relative path. Then you won’t even need gatsby-plugin-netlify-cms-paths.