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.

1. Place a high-res image in /static/assets
2. 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`,
      },
    },

1. 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,
            },
          },
        ],
      },
    },

1. 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

[tmrp]

@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!

[sslotsky]

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