profile
viewpoint
Jesper Haug Karsrud jkarsrud Oslo, Norway Front-end engineer

glimmer-router/glimmer-router 20

A declarative router for Glimmer.js

jkarsrud/ember-cli-defeatureify 20

Ember-CLI addon to defeatureify your apps

jkarsrud/dotfiles 3

My own dotfiles

jkarsrud/ember-movies 3

Demo-application for presentations using themoviedb.org's API's

jkarsrud/accordionize 1

jQuery Accordion plugin

jkarsrud/buster-docs-sphinx 1

New documentation site, Sphinx powered

edmellum/multisnake 0

Multiplayer snake

jkarsrud/.emacs.d 0

My Emacs settings

issue commentgatsbyjs/gatsby

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

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

jkarsrud

comment created time in 2 months

issue commentgatsbyjs/gatsby

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

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

comment created time in 2 months

issue openedgatsbyjs/gatsby

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

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 

created time in 2 months

create barnchjkarsrud/remark-contentful-image-repro

branch : master

created branch time in 2 months

created repositoryjkarsrud/remark-contentful-image-repro

created time in 2 months

more