Inline images from markdown are showing blur.

Description

Hey folks, I recently moved my blog to Gatsby, and here I am using Netlify as my CMS, the images which I added via Netlify CMS inline in Markdown aren’t showing up properly, instead, it is appearing blurred the live URL of the same is here Demo

Steps to reproduce

Here I am attaching my repo to reproduce this issue REPO LINK

1. Clone this repo
2. Install the dependencies and gatsby develop
3. Feel free to fork the repo for testing with Netlify CMS (for testing).

Expected result

The images should appear clear in the blog detail page which is uploaded through Netlify admin, ie., it should able to read the image from inline Markdown.

Actual result

The image is appearing blur in blog detail page added using Netlify CMS

Demo

Environment

  System:
    OS: Linux 4.15 Ubuntu 18.04.4 LTS (Bionic Beaver)
    CPU: (4) x64 Intel(R) Core(TM) i3-4150 CPU @ 3.50GHz
    Shell: 4.4.20 - /bin/bash
  Binaries:
    Node: 12.9.1 - ~/.nvm/versions/node/v12.9.1/bin/node
    Yarn: 1.21.1 - /usr/bin/yarn
    npm: 6.14.3 - ~/.nvm/versions/node/v12.9.1/bin/npm
  Languages:
    Python: 2.7.17 - /usr/bin/python
  Browsers:
    Chrome: 80.0.3987.149
    Firefox: 74.0
  npmPackages:
    gatsby: ^2.18.12 => 2.18.12 
    gatsby-image: ^2.2.34 => 2.2.34 
    gatsby-paginate: ^1.1.1 => 1.1.1 
    gatsby-plugin-catch-links: ^2.1.21 => 2.1.21 
    gatsby-plugin-manifest: ^2.2.31 => 2.2.31 
    gatsby-plugin-netlify: ^2.1.30 => 2.1.30 
    gatsby-plugin-netlify-cms: ^4.1.33 => 4.1.33 
    gatsby-plugin-offline: ^3.0.30 => 3.0.30 
    gatsby-plugin-optimize-svgs: ^1.0.3 => 1.0.3 
    gatsby-plugin-react-helmet: ^3.1.16 => 3.1.16 
    gatsby-plugin-react-svg: ^3.0.0 => 3.0.0 
    gatsby-plugin-robots-txt: ^1.5.0 => 1.5.0 
    gatsby-plugin-sass: ^2.1.26 => 2.1.26 
    gatsby-plugin-sharp: ^2.3.5 => 2.3.5 
    gatsby-plugin-sitemap: ^2.2.26 => 2.2.26 
    gatsby-remark-autolink-headers: ^2.1.22 => 2.1.22 
    gatsby-remark-copy-linked-files: ^2.1.35 => 2.1.35 
    gatsby-remark-images: ^3.1.39 => 3.1.39 
    gatsby-remark-lazy-load: ^1.0.2 => 1.0.2 
    gatsby-remark-normalize-paths: ^1.0.0 => 1.0.0 
    gatsby-remark-prismjs: ^3.3.29 => 3.3.29 
    gatsby-remark-relative-images: ^0.2.3 => 0.2.3 
    gatsby-remark-smartypants: ^2.1.19 => 2.1.19 
    gatsby-source-filesystem: ^2.1.40 => 2.1.40 
    gatsby-transformer-remark: ^2.6.45 => 2.6.45 
    gatsby-transformer-sharp: ^2.3.7 => 2.3.7 

[Js-Brecht]

I used your example repository.

I made gatsby-remark-images in gatsby-config.js look like this:

...
          {
            resolve: 'gatsby-remark-images',
            options: {
              maxWidth: 1920,
              withWebp: true,
              // quality: 70,
            },
          },
...

and your test.md file I changed to this:

---
template: blog
master_category: Books
featuredImage: ../../static/blogs/thank_you_1920x1080.jpg
fullBanner: true
seoTitle: Test
title: Test
slug: /blog/test
draft: false
date: 2020-03-23T10:43:25.368Z
dateModified: 2020-03-23T10:43:25.406Z
keywords: Test
tags:
  - Test
description: Test Description
---
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et tincidunt leo, a sagittis lacus. Ut id metus lacinia tortor aliquam luctus sed a orci. Aenean tincidunt augue velit, aliquet dignissim eros eleifend nec. Nulla eget convallis metus, vestibulum viverra erat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla ipsum sapien, ultricies vel lacinia quis, bibendum porta tortor. Duis massa elit, pharetra ut sem venenatis, consequat ullamcorper dui. Vestibulum non magna id elit fermentum posuere. Donec sagittis varius felis, et blandit nisi convallis et. Nunc dictum nec massa semper rutrum. In eu facilisis felis, ut dignissim nibh. Vivamus felis massa, sodales eget est a, ornare lacinia magna. Donec sit amet nulla ex.

![Test](thank_you_1920x1080.jpg "Test")

If I remember correctly, you won’t be able to make the featuredImage frontmatter field a relative path like that with Netlify CMS. However, you can use a custom resolver to get the actual File node that is generated for that image, and query it instead of the featuredImage field. I’ve done this before for Netlify CMS: see this comment in Spectrum. Perhaps you could adapt that to fit your use case?

[bhavikji]

@Js-Brecht : Ok let me give me a try!