gatsby-remark-images cannot use background color when loading images from MDX

zhenghaohe commented 4 years ago

Description

I am using gatsby-transformer-remark write blogs via MDX and I need to embed images in the blogs. I used gatsby-remark-images plugin and I got the image optimization and the default blur up effect when loading the image. However I want to change it to using the background color technique described in here https://using-gatsby-image.gatsbyjs.org/background-color/

I tried to set the backgroundColor inside the of the options of gatsby-remark-images like this

 {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 1024,
              showCaptions: true,
              linkImagesToOriginal: false,
              withWebp: true,
              backgroundColor: "red",
            },
          },

However images still blur up the images when loading.

Expected result

The images should fade in with the background colour I set when loading, like described in https://using-gatsby-image.gatsbyjs.org/background-color/

Actual result

The images always blur up when loading

Environment

Run gatsby info --clipboard in your project directory and paste the output here.

System: OS: macOS 10.15.5 CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz Shell: 5.7.1 - /bin/zsh Binaries: Node: 12.16.3 - /usr/local/bin/node Yarn: 1.22.4 - /usr/local/bin/yarn npm: 6.14.5 - /usr/local/bin/npm Languages: Python: 2.7.16 - /usr/local/bin/python Browsers: Chrome: 83.0.4103.97 Firefox: 76.0.1 Safari: 13.1.1 npmPackages: gatsby: ^2.21.33 => 2.23.0 gatsby-background-image: ^1.1.1 => 1.1.1 gatsby-image: ^2.4.3 => 2.4.6 gatsby-plugin-advanced-sitemap: ^1.5.4 => 1.5.5 gatsby-plugin-google-analytics: ^2.3.2 => 2.3.3 gatsby-plugin-manifest: ^2.4.3 => 2.4.10 gatsby-plugin-netlify-cms: ^4.3.2 => 4.3.4 gatsby-plugin-netlify-cms-paths: ^1.3.0 => 1.3.0 gatsby-plugin-offline: ^3.2.2 => 3.2.8 gatsby-plugin-react-helmet: ^3.3.1 => 3.3.3 gatsby-plugin-sass: ^2.3.1 => 2.3.3 gatsby-plugin-sharp: ^2.6.3 => 2.6.10 gatsby-remark-images: ^3.3.3 => 3.3.9 gatsby-remark-prismjs: ^3.5.1 => 3.5.3 gatsby-remark-reading-time: ^1.1.0 => 1.1.0 gatsby-remark-responsive-iframe: ^2.4.2 => 2.4.4 gatsby-source-filesystem: ^2.3.3 => 2.3.10 gatsby-transformer-remark: ^2.8.8 => 2.8.14 gatsby-transformer-sharp: ^2.5.2 => 2.5.4 npmGlobalPackages: gatsby-cli: 2.12.38

pieh commented 4 years ago

I am using gatsby-transformer-remark write blogs via MDX

I need some clarification here - are you using gatsby-transformer-remark or gatsby-plugin-mdx?

It would also be great to have minimal reproduction or even just access to your project to be able to reproduce and figure problem out

zhenghaohe commented 4 years ago

I am using gatsby-transformer-remark write blogs via MDX

I need some clarification here - are you using gatsby-transformer-remark or gatsby-plugin-mdx?

It would also be great to have minimal reproduction or even just access to your project to be able to reproduce and figure problem out

Hi sorry if I didn't make myself clear. I am using gatsby-transformer-remark. By the way I really wanted to ask what's the difference between gatsby-transformer-remark or gatsby-plugin-mdx in the context of parsing MDX into blog post pages? I have seen many places using gatsby-transformer-remark but there are also a few starters that are using gatsby-plugin-mdx.

Here is the my gatsby-config.js


module.exports = {
  siteMetadata: {
    title: `Gatsby Starter Blog`,
    author: {
      name: `Kyle Mathews`,
      summary: `who lives and works in San Francisco building useful things.`,
    },
    description: `A starter blog demonstrating what Gatsby can do.`,
    siteUrl: `https://gatsby-starter-blog-demo.netlify.app/`,
    social: {
      twitter: `kylemathews`,
    },
  },
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/content/blog`,
        name: `blog`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/content/assets`,
        name: `assets`,
      },
    },
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 590,
              showCaptions: true,
              linkImagesToOriginal: false,
              withWebp: true,
              backgroundColor: "blue",
            },
          },
          {
            resolve: `gatsby-remark-responsive-iframe`,
            options: {
              wrapperStyle: `margin-bottom: 1.0725rem`,
            },
          },
          `gatsby-remark-prismjs`,
          `gatsby-remark-copy-linked-files`,
          `gatsby-remark-smartypants`,
        ],
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-google-analytics`,
      options: {
        //trackingId: `ADD YOUR TRACKING ID HERE`,
      },
    },
    `gatsby-plugin-feed`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `Gatsby Starter Blog`,
        short_name: `GatsbyJS`,
        start_url: `/`,
        background_color: `#ffffff`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `content/assets/gatsby-icon.png`,
      },
    },
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `src/utils/typography`,
      },
    },
    // this (optional) plugin enables Progressive Web App + Offline functionality
    // To learn more, visit: https://gatsby.dev/offline
    // `gatsby-plugin-offline`,
  ],
}

As for the minimal reproduction, you can take a look at this starter https://github.com/gatsbyjs/gatsby-starter-blog. As I described in the issue, when you config the gatsby-remark-images plugin to use background color when loading it still uses the default behaviour which is blur up.

polarathene commented 4 years ago

I don't know much about markdown plugin related image handling, but base64 placeholder should be possible to opt-out of, at least it is via graphql fragments, assuming these markdown plugins don't do such for images, they'd need an option to opt-out of base64 in the fixed/fluid object data for gatsby-image.

The gatsby-image component itself supports base64 and backgroundColor placeholders together, with base64 having higher priority(layered above backgroundColor) so that one can use webp format and provide a fallback solid colour if the browser does not support webp.

Just something to keep in mind for anyone that tries to resolve this, they don't want to mess with the ordering/behaviour in gatsby-image, and supporting both can still be valid(although only if using webp base64).

LekoArts commented 3 years ago

Closing this as stale since in the meantime Gatsby v4 and updated related packages were released. Please try with the latest versions and if you still see this problem open a new bug report (it must include a minimal reproduction).

gatsbyjs / gatsby