Showing images specified via relative URLs in CMS Editor

I’m trying to integrate CMS with our blog content, which specifies images via URLs that are relative to the markdown file.

To demonstrate this, I’ve forked the Netlify+Gatsby starter here. You can see the modified blog post here. The image loads appropriately on the blog when viewed, but shows as an invalid image in the CMS editor.

The Editor is apparently looking for the image at the following URL:

https://serene-wright-0bf539.netlify.app/img/flavor_wheel.jpg

However, the image is fingerprinted and stored at this URL:

https://serene-wright-0bf539.netlify.app/static/19a6d5ab24bbc3b3531f11ecab349683/72e01/flavor_wheel.jpg

Is there some configuration setting I can change that will result in the image appearing correctly within the editor without giving up the nice fingerprinting/optimization that gatsby-remark-images provides?

Hi @dstaley and welcome to the community!

The CMS uses the media_folder configuration to locate media files in the repo:

and uses public_folder when outputting media files paths in the markdown:

Since the image in that post is not under static/img, but under src/pages/blog it will up as broken in the CMS.

See more here https://github.com/netlify/netlify-cms/issues/3671

I recommend using the configuration here:

to store media files relative to their content since that works best for Gatsby.