gatsby: Inline images in Markdown not being transformed by gatsby-remark-images

Description

I’m trying to use gatsby-remark-images to optimize images in my blog posts, but when I view my blog post, it appears to just load the large image. There is no blur-up effect happening.

Steps to reproduce

Here’s the repo where I can’t make this work.

Place a high-res image in /static/assets
Add an entry in gatsby-config.js so gatsby-source-filesystem can process those images

    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `static/assets`,
        path: `${__dirname}/static/assets`,
      },
    },

Add gatsby-remark-images to the gatsby-transformer-remark configuration

    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 813,
            },
          },
          {
            resolve: `gatsby-remark-prismjs`,
            options: {
              noInlineHighlight: true,
            },
          },
        ],
      },
    },

Add a reference to my high-res image in a blog post

![](/assets/construction.jpg)

Expected result

When I view my blog post, the blur-up effect should occur before my high-res image is displayed.

Actual result

There is no blur-up effect. The page appears to load the high-res image the same as it would without the plugin.

Environment

  System:
    OS: Linux 4.15 Ubuntu 18.04.3 LTS (Bionic Beaver)
    CPU: (8) x64 Intel(R) Core(TM) i7-8650U CPU @ 1.90GHz
    Shell: 4.4.20 - /bin/bash
  Binaries:
    Node: 10.16.0 - ~/.nvm/versions/node/v10.16.0/bin/node
    Yarn: 1.12.3 - /usr/bin/yarn
    npm: 6.9.0 - ~/.nvm/versions/node/v10.16.0/bin/npm
  Languages:
    Python: 2.7.17 - /usr/bin/python
  Browsers:
    Chrome: 70.0.3538.77
    Firefox: 71.0
  npmPackages:
    gatsby: ^2.18.12 => 2.18.12
    gatsby-background-image: ^0.9.12 => 0.9.12
    gatsby-image: ^2.2.34 => 2.2.34
    gatsby-plugin-linaria: ^2.0.0 => 2.0.0
    gatsby-plugin-manifest: ^2.2.31 => 2.2.31
    gatsby-plugin-netlify-cms: ^4.1.33 => 4.1.33
    gatsby-plugin-offline: ^3.0.27 => 3.0.27
    gatsby-plugin-react-helmet-async: ^1.0.13 => 1.0.13
    gatsby-plugin-sharp: ^2.3.5 => 2.3.5
    gatsby-plugin-typescript: ^2.1.23 => 2.1.23
    gatsby-remark-images: ^3.1.39 => 3.1.39
    gatsby-remark-prismjs: ^3.3.28 => 3.3.28
    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
  npmGlobalPackages:
    gatsby-cli: 2.7.7

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 20 (8 by maintainers)

Most upvoted comments

@ttstauss I came across these issues as well while working on a recent Gatsby TypeScript project. I fixed the issue by using the gatsby-plugin-netlify-cms-paths plugin. Now, I don’t need to add ../ to the image URLs to get them to work, and the images show now up automatically.

My gatsby-config.js

module.exports = {
  plugins: [
    `gatsby-plugin-typescript`,
    `gatsby-plugin-react-helmet`,
    `gatsby-image`,
    `gatsby-transformer-remark`,
    `gatsby-transformer-yaml`,
    `gatsby-plugin-theme-ui`,
    `gatsby-plugin-emotion`,
    {
     resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/content/img`,
        name: 'image-uploads',
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/content/blog-posts`,
        name: 'blog-posts',
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/content`,
        name: 'content',
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-plugin-netlify-cms-paths`,
            options: {
              // Path to your Netlify CMS config file
              cmsConfig: `/static/admin/config.yml`,
            },
          },
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 2400,
              quality: 100,
              withWebp: true,
              loading: 'lazy',
              linkImagesToOriginal: false,
            },
          },
        ],
      },
    },
    `gatsby-plugin-netlify-cache`,
    {
      resolve: `gatsby-plugin-netlify-cms`,
      options: {
        modulePath: `${__dirname}/src/cms/cms.js`,
      },
    },
    `gatsby-plugin-netlify`,
  ],
}

My NetlifyCMS admin content folders in static/admin/config.yml

media_folder: content/img
public_folder: /img

Hope this helps!

tmrp on May 27, 2020

https://saxyfool.dev/blog/blur-it-up

sslotsky on Jan 5, 2020

@tmrp your suggestion worked perfectly. Thanks for the help! 👏

ttstauss on May 28, 2020

@reinierkors for @sslotsky’s case the effect was kicking in, what was happening was in his content there was a good ammount of text and the image was not in the viewport so the effect would kick in but we couldn’t see it. I tested it with a dummy document and it was blurring up. And glad that you found it. Should you need any help, feel free to comment here so that we can go over it.

jonniebigodes on Jan 5, 2020