gatsby-remark-images-contentful exposes same image to render when they should be different

[jkarsrud]

Description

When rendering content through gatsby-plugin-mdx with the gatsby-remark-images-contentful plugin, I am seeing the same image being rendered for all images in the content instead of different ones. I have narrowed this down to the image assets in Contentful images having the same file name (image.png in my case). This results in the cacheKey generated by the plugin to be the same for all images served from Contentful with that filename, even if they are separate assets with unique ID's in Contentful.

This seems like it's a bug, as Contentful and Gatsby are separate and the former is often maintained by editors not knowing that having two image assets with the same file name might cause issues for the website. Nor should they need to care, or am I not

Steps to reproduce

Option 1 is to clone https://github.com/jkarsrud/remark-contentful-image-repro and run it in a browser to observe the bug. Replacing one of the image URL with the following in /src/posts/test.md will show that the file name matters;
//images.ctfassets.net/wgbykpk4lo2v/1PxG4IVt7p8Y3uWG8uQgEz/bd8084807826e28d92738b147c59fd1e/andrew-neel-cckf4TsHAuw-unsplash.jpg

Option 2 is to create your own version of the repo above.

Create a Gatsby site with gatsby-plugin-mdx and gatsby-remark-images-contentful. Then, create a post with the following content (Note: The images here are hosted on my personal Contentful space):

![Image 1](//images.ctfassets.net/wgbykpk4lo2v/1xMx6pMioceAkPLHq4SSIE/896966d66f01337171a39400e71bb75d/image.png)

![Image 2](//images.ctfassets.net/wgbykpk4lo2v/20HBreTyDleLCOTBuoSh9F/b440c073102b1f61a9fef3585631e960/image.png)

Then make a page template with the following content:

import React from "react"
import { graphql } from "gatsby"
import { MDXProvider } from "@mdx-js/react"
import { MDXRenderer } from "gatsby-plugin-mdx"

const IndexPage = ({ data }) => {
  return (
    <MDXProvider>
      <div style={{ margin: "0 auto", maxWidth: 1000, padding: 10 }}>
        <MDXRenderer>{data.post.body}</MDXRenderer>
      </div>
    </MDXProvider>
  )
};

export const query = graphql`
  query IndexQuery {
    post: mdx {
      body
    }
  }
`;

export default IndexPage;

Expected result

The images in the content rendered from Markdown should be different, even if the filename is the same

Actual result

The images rendered from the Markdown content are the same image.

Environment

  System:
    OS: macOS High Sierra 10.13.6
    CPU: (8) x64 Intel(R) Core(TM) i7-8559U CPU @ 2.70GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 12.16.3 - ~/.volta/tools/image/node/12.16.3/6.14.4/bin/node
    Yarn: 1.21.1 - ~/.volta/tools/image/yarn/1.21.1/bin/yarn
    npm: 6.14.4 - ~/.volta/tools/image/node/12.16.3/6.14.4/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 81.0.4044.129
    Firefox: 70.0.1
    Safari: 13.1
  npmPackages:
    gatsby: ^2.21.0 => 2.21.0 
    gatsby-plugin-mdx: ^1.2.5 => 1.2.5 
    gatsby-plugin-sharp: ^2.6.0 => 2.6.0 
    gatsby-remark-images-contentful: ^2.3.0 => 2.3.0 
    gatsby-source-filesystem: ^2.3.0 => 2.3.0 

[danabrit]

Hi @jkarsrud !

Sorry to hear you're running into an issue. To help us best begin debugging the underlying cause, it is incredibly helpful if you're able to create a minimal reproduction. This is a simplified example of the issue that makes it clear and obvious what the issue is and how we can begin to debug it.

If you're up for it, we'd very much appreciate if you could provide a minimal reproduction and we'll be able to take another look.

Thanks for using Gatsby! 💜

[jkarsrud]

Sorry if the reproduction got hidden in the wall of text, but I have a reproduction repository here:

https://github.com/jkarsrud/remark-contentful-image-repro

[jkarsrud]

Hi again @danabrit.
To make it even easier to debug and reproduce this for you, I created a Codesandbox reproduction.

[jagoral]

Hello, cacheKey is generated based on plugin options and fileName. Using i.e. url should fix that.