Gatsby: Seeing double images - blurry and full size

[whoisryosuke]

Description

When I use images inside my blog posts (which use MDX), I see the image twice in my post, once as the blurry/low-res version (or traced SVG if I set that option), and again as the full size. Both images are stacked on top of eachother, and break the full width of the content area.

Here's a screenshot of what's happening:

There are no errors in the console that give notice to anything wrong.

Not sure if it has do with my config? But here it is for reference

Steps to reproduce

1. Clone my blog at this point: https://github.com/whoisryosuke/ryosuke-gatsby-blog/tree/6c0ad840c0eb9db8dcc576c314fe3216fd0ca13a
2. Run yarn && yarn develop
3. Browse any recent blog post using images: http://localhost:8000/blog/

Expected result

Should only see the final image ultimately, instead of two.

Actual result

Seeing both the blurry/traced SVG version and final image on top of eachother.

Environment

  System:
    OS: macOS High Sierra 10.13.6
    CPU: (4) x64 Intel(R) Core(TM) i5-2400S CPU @ 2.50GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.16.3 - /usr/local/bin/node
    Yarn: 1.19.0 - /usr/local/bin/yarn
    npm: 6.9.0 - /usr/local/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 79.0.3945.130
    Firefox: 61.0.1
    Safari: 13.0.3
  npmPackages:
    gatsby: ^2.15.28 => 2.18.8
    gatsby-image: ^2.2.23 => 2.2.34
    gatsby-link: ^2.2.17 => 2.2.25
    gatsby-paginate: ^1.1.1 => 1.1.1
    gatsby-plugin-feed: ^2.3.15 => 2.3.23
    gatsby-plugin-google-analytics: ^2.1.19 => 2.1.29
    gatsby-plugin-manifest: ^2.2.20 => 2.2.31
    gatsby-plugin-mdx: ^1.0.46 => 1.0.59
    gatsby-plugin-offline: ^3.0.11 => 3.0.27
    gatsby-plugin-react-helmet: ^3.1.10 => 3.1.16
    gatsby-plugin-sharp: ^2.2.27 => 2.3.5
    gatsby-plugin-sitemap: ^2.2.16 => 2.2.22
    gatsby-plugin-styled-components: ^3.1.8 => 3.1.14
    gatsby-plugin-twitter: ^2.1.9 => 2.1.15
    gatsby-plugin-typescript: ^2.1.11 => 2.1.20
    gatsby-remark-copy-linked-files: ^2.1.23 => 2.1.31
    gatsby-remark-images: ^3.1.25 => 3.1.35
    gatsby-remark-prismjs: ^3.3.16 => 3.3.25
    gatsby-remark-smartypants: ^2.1.11 => 2.1.17
    gatsby-source-filesystem: ^2.1.28 => 2.1.40
    gatsby-transformer-json: ^2.2.13 => 2.2.20
    gatsby-transformer-remark: ^2.6.26 => 2.6.39
    gatsby-transformer-sharp: ^2.2.19 => 2.3.7
  npmGlobalPackages:
    gatsby-cli: 2.8.30

[flikteoh]

Adding the below into the MDX plugin options will likely fix the double-image issue.

plugins: [`gatsby-remark-images`, `gatsby-remark-other-plugins`]

Example:

{
  resolve: `gatsby-plugin-mdx`,
  options: {
    extensions: [`.md`, `.mdx`],
    plugins: [`gatsby-remark-images`, `gatsby-remark-unwrap-images`],
    gatsbyRemarkPlugins: [
      {
        resolve: `gatsby-remark-unwrap-images`,
      },
      {
        resolve: `gatsby-remark-images`,
        options: {
          maxWidth: 800,
          withWebp: true,
          loading: 'lazy',
          linkImagesToOriginal: false,
        },
      },
    ],
  },
},

[LekoArts]

Hi, thanks for the issue. This is a duplicate of https://github.com/gatsbyjs/gatsby/issues/15486

[kirill-konshin]

I have the same issue — double images, one normal, one blurred but in my case I use them as featuredImage like so:

---
title: "XXX"
featuredImage: ./Image-08.jpg
---

And then in the src/pages/blog.ts:

import Img from 'gatsby-image';

const BlogIndex: FC<BlogIndexProps> = ({
    data: {
        allMdx: {edges},
    },
    location,
}) => edges.map(({node: {frontmatter: {featuredImage}}}) => (
    <Img fluid={featuredImage} />
)));

export default BlogIndex;

export const pageQuery = graphql`
    query BlogIndex {
        allMdx(sort: {fields: [frontmatter___date], order: DESC}) {
            edges {
                node {
                    frontmatter {
                        featuredImage {
                            childImageSharp {
                                fluid(maxWidth: 1000) {
                                    ...GatsbyImageSharpFluid
                                }
                            }
                        }
                    }
                }
            }
        }
    }
`;

I only see this glitch for the blog images injected this way. Other images (not from featuredImage field) are OK even if injected via Img.

I also noticed that it only happens on initial page render, if I navigate away and back images will be inserted properly. It does not happen in dev mode at all, works fine, problem only is visible when serving build.

@LekoArts I have used the code above with plugins and gatsbyRemarkPlugins it did not help.

[kirill-konshin]

I figured out what the problem is.

I have double checked literally everything, I even made it so that the same component renders actual posts with images, everywhere. The doubling only occurs in blog index page (as shown above) and only on initial render. All other pages like generated in gatsby-node and others work well.

In previous code snipped I had oversimplified markup, in my actual case it has one tiny difference, a <p> tag aroud <Img>:

import Img from 'gatsby-image';

const BlogIndex: FC<BlogIndexProps> = ({edges, ...}) => edges.map(({node: {frontmatter: {featuredImage}}}) => (
    <p><Link to={...}><Img fluid={featuredImage} /></Link></p>
)));

<Img> by default renders a div which is popped out of <p>. Somehow it only happens on one page of many...

When I swapped <p> with <div> everything began to work.

P.S. <Img fluid={...} Tag="span"/> results in nothing, no image at all, per doc it was supposed to work...