Can not preview images in right preview pane of CMS

Describe the bug

First of all, this issue might exist already and I might be misunderstanding something in the config.

I had a hard time sourcing images from netlify-cms using all kinds of relative path plugins until I realised that there is a beta functionality for specifying relative paths. Amazing!

Now it was up to previewing them in the CMS. I was able to preview the frontmatter image by using getAsset in my preview template and rendering the image with the blob: url. Yet I can’t seem to figure out how to do this with images written in the markdown body as ![Alt Text](../../static/media/image.png).

To Reproduce

  • Take over the following config.yml setup:
media_folder: 'static/media'
public_folder: 'media'

local_backend: true

collections:
  - name: 'posts'
    label: 'Posts'
    folder: '/content/_posts'
    extension: 'mdx'
    public_folder: '../../static/{{public_folder}}'
    media_folder: '../../static/media'
    format: 'frontmatter' 
    create: true
    slug: '{{slug}}'
    fields:
  • Have a following folder structure, where the blog posts are saved under content:
- site
- content
- static
  - media
       image.png

Expected behavior
The images in the markdown body can be previewed in the right preview pane

Screenshots

Applicable Versions:

  • Netlify CMS version: netlify-cms-app@2.12.21
  • Git provider: GitHub
  • OS: macOS Catalina 10.15.5
  • Browser version Version 85.0.4183.83 (Official Build)
  • Node.JS version: 13.13.0

CMS configuration

media_folder: 'static/media'
public_folder: 'media'

local_backend: true

collections:
  - name: 'posts'
    label: 'Posts'
    folder: '/content/_posts'
    extension: 'mdx'
    public_folder: '../../static/{{public_folder}}'
    media_folder: '../../static/media'
    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', default: 'alternate', widget: 'string'}
          - {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' }

  - name: 'categories'
    label: 'Categories'
    folder: '/content/_categories'
    create: true
    slug: '{{name}}'
    identifier_field: 'name'
    fields:
      - { label: 'Name', name: 'name', widget: 'string' }
      - { label: 'Label', name: 'label', widget: 'string' }

  - name: 'authors'
    label: 'Authors'
    folder: '/content/_authors'
    create: true
    slug: '{{name}}'
    identifier_field: 'name'
    fields:
      - { label: 'Name', name: 'name', widget: 'string' }
      - {
          label: 'Avatar',
          name: 'avatar',
          widget: 'image',
          allow_multiple: false,
        }

Additional context

  • I am using gatsby-plugin-mdx with gatsby-remark-images.
  • I am using a jsx component for the preview template that renders a MDX runtime provider with the value of the mdx post body as content.
  • I see in the demo of netlify-cms that the previews of the inline markdown images also get rendered with a blob: url. How can I achieve this or is this not the right approach?
  • I might be overseeing things and your fresh pair of eyes can help :).

Hi @zlobi, welcome to the community and sorry for the late reply.

You would need to somehow call getAsset during the conversion of the markdown to html.
Not sure how you can hook into that when using gatsby-plugin-mdx.

Can you:

  1. Share a repo with the issue so I can investigate?
  2. Share how would you like to structure content? e.g
/content/_posts/post1.md
/content/_posts/image1.png

or

/content/_posts/post1.md
/static/media/image1.png

For the latter I don’t think you need to configure media folder at the collection level.

  1. See more here https://github.com/netlify/netlify-cms/issues/3671 about differences between media_folder and public_folder.

Thanks