gatsby-plugin-mdx unable to resolve images from frontmatter and body at the same time

Question

The repo I am having trouble with is https://github.com/agenciaglobal/web this is my gatsby-config.js. at least the concerning part.

    {
      resolve: `gatsby-source-filesystem`,
      options: { path: `${__dirname}/content`, name: `content` },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: { path: `${__dirname}/content/assets`, name: `assets` },
    },
    {
      resolve: "gatsby-plugin-root-import",
      options: {
        src: path.join(__dirname, "src"),
        content: path.join(__dirname, "content"),
        pages: path.join(__dirname, "src/pages"),
        shared: path.join(__dirname, "src/shared"),
        components: path.join(__dirname, "src/components"),
        static: path.join(__dirname, "static"),
      },
    },
    `gatsby-plugin-typescript`,
    `gatsby-plugin-layout`,
    `gatsby-plugin-feed-mdx`,
    {
      resolve: `gatsby-transformer-sharp`,
    },
    `gatsby-plugin-sharp`,
    `gatsby-remark-images`,
    {
      resolve: `gatsby-plugin-mdx`,
      options: {
        extensions: [".mdx", ".md"],
        gatsbyRemarkPlugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 590,
            },
          },
        ],
      },
    },
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-plugin-material-ui`,
      options: { stylesProvider: { injectFirst: true } },
    },
    {
      resolve: `gatsby-plugin-netlify-cms`,
      options: { modulePath: `${__dirname}/src/cms.js` },
    },
    {
      resolve: "gatsby-plugin-netlify-cache",
      options: { cachePublic: true },
    },

The whole thing is here https://github.com/agenciaglobal/web/blob/master/gatsby-config.js my website is working! but I am having trouble making images work

This is my collection

media_folder: content/assets
public_folder: ../assets
collections:
  - name: news
    label: Notícias
    folder: content/news
    create: true
    fields:
      - { name: path, label: Path }
      - { name: date, label: Data, widget: date }
      - { name: "body", label: "Conteúdo do blog post", widget: "markdown" }
      - { name: title, label: Título }
      - { name: description, label: Descrição }
      - name: postType
        label: Tipo de post
        widget: select
        options:
          - { label: "Notícia", value: "news" }
          - { label: "Artigo", value: "article" }
      - name: type
        label: Tipo do box de exibição na lista
        widget: select
        options:
          - { label: "Full", value: "FULL" }
          - { label: "Half", value: "HALF" }
          - { label: "Mirror", value: "MIRROR" }
          - { label: "Left", value: "LEFT" }
          - { label: "Right", value: "RIGHT" }
          - { label: "Quote", value: "QUOTE" }
      - name: "image"
        label: "Imagem de destaque"
        widget: "image"
      - label: "Tags"
        name: "tags"
        widget: "relation"
        collection: "tags"
        multiple: true
        searchFields: ["tag"]
        valueField: "tag"
        displayFields: ["tag"]
      - label: "Autor do post"
        name: "author"
        widget: "relation"
        collection: "team"
        searchFields: ["name", "about", "image"]
        valueField: "name"
        displayFields: ["name"]

Then actual news look like this

---
path: posteee
date: 2020-08-13T13:59:40.634Z
title: hey
description: fe
postType: news
type: HALF
image: assets/10-maria-dornelles.jpg
tags:
  - yay!!
author: João Paulo Rocha
---
laõoo

![](../assets/1000x550.png)

This is a working configuration. but cms will never write paths like these. The problem here is that when inserting data with the CMS it will always use the public_folder.

So if I use assets, it will work on the image field, but fail on the markdown body. if I use ../assets it will work on the markdown body but fail on the image frontmatter field

The image field will always fail if I try ../assets/whatever.png. so I think my only way out of this is making the body of the markdown recognise assets/image.png and not just ../assets/image.png. How can I achieve this?

Answer 1

Your paths for media_folder and public_folder should be something like:

media_folder: static/assets
public_folder: /assets

Since everything in /static is compiled within the same internal structure to the public folder, if you create a folder structure like /static/assets your asset's path will remain accessible for your MDX files. Moreover, this will output all your uploaded media in your /static folder without affecting your MDX files.

Summarizing, your assets should be under /static folder to ensure their availability paths in the public compiled folder. In addition, using relative paths (such as ../assets) may cause unexpected issues like the one you've described due to the compilation process.

From Netlify CMS documentation:

Media Folder

This setting is required.

The media_folder option specifies the folder path where uploaded files should be saved, relative to the base of the repo.

media_folder: "static/images/uploads"

Public Folder

This setting is required.

The public_folder option specifies the folder path where the files uploaded by the media library will be accessed, relative to the base of the built site. For fields controlled by [file] or [image] widgets, the value of the field is generated by prepending this path to the filename of the selected file. Defaults to the value of media_folder, with an opening / if one is not already included.

public_folder: "/images/uploads"

Based on the settings above, if a user used an image widget field called avatar to upload and select an image called philosoraptor.png, the image would be saved to the repository at /static/images/uploads/philosoraptor.png, and the avatar field for the file would be set to /images/uploads/philosoraptor.png.