Inline images src' in markdown body do not convert to relative paths.

[zlobizlobi]

Hi there @danielmahon,

Thank you loads for this nice functionality, yet I can't seem to figure out something. I am currently trying to render images in my Gatsby website from Netlify CMS. I am working with gatsby-remark-relative-images's 0.3.0 release and the images from my mdx frontmatter get picked up correctly by sharp and get rendered on my website with all percs of gatsby-image. This is due to using fmImagesToRelative(node) in gatsby-node.js: it transforms /media/image.png to ../../static/media/image.png.

Yet for the inline part of writing images in markdown - nothing happens at all. The paths of these stay exactly the same as reflected in my client. I tried upgrading your dependency to v2, but to no avail - it even stops converting my frontmatter image s paths to relative paths. Do you have any clue what is happening? Might it be related to our folder structure?:

-content
-static
  -media
-website

[danielmahon]

@zlobizlobi can you post your gatsby-config.js and netlify config.yml?

[zlobizlobi]

@danielmahon Thank you for looking into it!

My config.yml:

media_folder: static/media
public_folder: /media

collections:
  - name: 'posts'
    label: 'Posts'
    folder: '/content/_posts'
    extension: 'mdx'
    format: 'frontmatter'
    create: true
    slug: '{{slug}}'
    fields:
      - { label: 'Title', name: 'title', widget: 'string' }
      - { label: 'URL slug', name: 'slug', widget: 'string' }
      - label: 'Author'
        name: 'author'
        widget: 'relation'
        multiple: false
        optionsLength: 10
        collection: 'authors'
        displayFields: ['name']
        searchFields: ['name']
        valueField: 'name'
      - label: 'Date'
        name: 'date'
        widget: 'datetime'
        timeFormat: false
      - label: 'Categories'
        name: 'categories'
        widget: 'relation'
        multiple: true
        optionsLength: 10
        collection: 'categories'
        displayFields: ['label']
        searchFields: ['name', 'label']
        valueField: 'name'
      - { label: 'Meta title', name: 'metaTitle', widget: 'string' }
      - label: 'Meta Links'
        name: 'metaLinks'
        widget: 'list'
        fields:
          - {
              label: 'Rel attr',
              name: 'rel',
              widget: string,
              default: 'alternate',
            }
          - { label: 'Hreflang attr', name: 'hreflang', widget: string }
          - { label: 'Href attr', name: 'href', widget: string }
      - {
          label: 'Main image',
          name: 'mainImage',
          widget: 'image',
          allow_multiple: false,
        }
      - {
          label: 'Main image alt attribute',
          name: 'mainImageAltText',
          widget: 'string',
        }
      - { label: 'Meta Description', name: 'metaDescription', widget: 'text' }
      - { label: 'Blog post content', name: 'body', widget: 'markdown' }

and my gatsby-config.js:

module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: '../static/media',
        name: 'media',
      },
    },
    `babel-plugin-styled-components`,
    `gatsby-plugin-styled-components`,
    `gatsby-plugin-root-import`,
    `gatsby-plugin-react-helmet`,
    `gatsby-plugin-typescript`,
    `gatsby-plugin-graphql-codegen`,
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: '../content/_posts',
        name: 'posts',
      },
    },
    {
      resolve: `gatsby-plugin-mdx`,
      options: {
        extensions: [`.mdx`, `.md`],
        defaultLayouts: {
          'posts': require.resolve('./src/layouts/Post.tsx'),
          'default': require.resolve('./src/layouts/Default.tsx')
        },
        gatsbyRemarkPlugins: [
          { resolve: `gatsby-remark-unwrap-images` },
          { resolve: `gatsby-remark-relative-images` },
          {
            resolve: `gatsby-remark-images`,
            options: {
              quality: 100,
              withWebp: true,
              maxWidth: 760,
              linkImagesToOriginal: false,
              wrapperStyle: 'width: 100%;',
            },
          },
        ],
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: 'images',
        path: `${__dirname}/src/images`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: '../content/_categories',
        name: 'categories',
      },
    },
    {
      resolve: `gatsby-plugin-netlify-cms`,
      options: {
        manualInit: true,
        modulePath: `${__dirname}/src/cms/init.tsx`,
        enableIdentityWidget: true,
        customizeWebpackConfig: (config) => (config.node.fs = 'empty'),
      },
    },
  ],
};