Inline images from markdown are showing blur.

[bhavikji]

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]

Hey @bhavikji, it looks like you are trying to use webp format for your images. Can you add withWebp: true to your options for gatsby-remark-image in your gatsby-config.js? I just ran your repo, and noticed the problem you mentioned. Adding that option fixed it for me, for the most part.

The other part I had to fix was your image paths. They worked fine for me in develop, but when I did a production build, they were broken again.

Your image paths should be relative. Since you are using the name option, the image path should be relative to the dir property on the actual File node that has the sourceInstanceName which matches the name option for gatsby-remark-relative-images.

For example: the dir property for the thank_you_1920x1080.jpg for me is /path/to/repo/static/blogs. It will do a path.join() to join that path with the relative path of the image source. So I changed the image to:

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

and it worked.

Since you're using Netlify CMS, I wonder: do you have control over the paths generated for those inline images?

[bhavikji]

Hey @Js-Brecht: Thank you for helping me out can you please share your repo so that, I will match my config with yours

[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: Hey this resolves the issue this works like charm! <3

[Js-Brecht]

Good to hear! I'm going to close this now, but feel free to comment again if you have more issues.

[bhavikji]

@Js-Brecht : Just a quick question for .jpeg files, the above solve working perfect with .jpg, .png but not working with .jpeg is there any wayaround?

[Js-Brecht]

I don't seem to have any problems with files with .jpeg extensions. I just changed the files in the example to be .jpeg, and they loaded up just fine.

[Js-Brecht]

It still seems a little strange to me that it's not working unless you do webp. That shouldn't be happening, because the images URLs are valid. BUT, the <img> elements are being created with the property data-src, instead of src, so I'm trying to track down why it's not:

1. getting the correct property in the first place
2. not being changed to the correct property when it's loaded.

Using webp follows a little bit of a different path, so that's why that one is working... all of the HTML is correct.

[Js-Brecht]

Okay, I've figured out why it's not loading correctly.

You are using the gatsby-remark-lazy-load, which changes the properties of the elements that it wants to lazy load. So, for images, it will change src to data-src, and then when the image has loaded, it will change it back.

For it to do that, you have to have lazysizes installed, and then import it (for side effects) into gatsby-browser.js:

// gatsby-browser.js
import 'lazysizes';

So the first answer was basically a workaround, but this is the actual fix. Sorry about that.

[bhavikji]

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