✨Discover storytelling in the AI age with Pixar's Matthew Luhn at Sanity Connect, May 8th—register now

Trouble adding an image to a Gatsby project using gatsby-image-sharp and gatsby-transformer-sharp.

13 replies
Last updated: May 5, 2020
Hi! I'm having some trouble adding an image to the
index.js
page of my project. My project is using gatsby and I've tried rendering it the gatsby image way and it won't render.
May 4, 2020, 12:21 AM
Hi User! Could you share your code for (1) how you’re querying the image data, and (2) how you’re implementing the image in this case? 🙂
May 4, 2020, 10:12 AM
Hi! I import the image like this
import p1 from '../../img/hero.JPG'
and I try and render the image like this:

function Hero () {
    return (
      <div className={styles.hero}>
        <img src={p1} alt="hero image 1" />
      </div>
    )
  }
  
  export default Hero;
May 4, 2020, 9:24 PM
I tried adding
gatsby-transformer-sharp
and
gatsby-image-sharp
but when running npm run dev it didn't compile.
May 4, 2020, 9:52 PM
I should add I’m also fine adding images to a page another way. I’m just not sure how
May 5, 2020, 1:17 PM
Hi again User, are you using
gatsby-source-sanity
for this project? If it’s ok for you to add images to Sanity and load them from there, you could decide to go that route, but it’s not strictly necessary.
What errors are you seeing when trying to compile with
gatsby-transformer-sharp
and
gatsby-image-sharp
?
Also, regarding the image not displaying, do you have any public repo for me to check? It seems to be a default
img
tag in this case, not something loaded by
gatsby-image
for example, so it should get picked up (in theory 🙂). Have you verified that you can load the image on the specified path?
May 5, 2020, 2:20 PM
Hello! Yes I have gatsby-source-sanity for this project I tied just just adding my images through there at one point but I couldn't get the hang of rendering them in the index page 🙃
this is the error that I see
Error: Cannot find module 'gatsby/graphql'
followed by a stack trace in node modules. Here's the repo: https://github.com/ademusoyo/ademusoyo-blog
May 5, 2020, 2:36 PM
Thanks for sharing the repo link! When I try to run it locally, there seems to be a mismatch between some plugins added to
gatsby-config.js
but not to `package.json`:
gatsby-plugin-sharp

gatsby-transformer-sharp

gatsby-plugin-prefetch-google-fonts
If you want to use these plugins, they should be installed to
package.json
. That’s more of a side note though: for now I removed them to see the site and check the image issue.
The issue in this case is that when building the site, Webpack doesn’t seem to have the appropriate loader to process the
JPG
files - that is, when
JPG
is written in all caps. If you change the image extensions to
jpg
(all lowercase) instead, they should get picked up and start displaying on the site 🤞
May 5, 2020, 3:15 PM
wow! thank you so much! I would've been stuck on that forever
May 5, 2020, 3:36 PM
is the only way to ensure that it is in package.json is just copying and pasting those dependencies in there? I thought it was just be automatically added but it's not
May 5, 2020, 3:40 PM
May 5, 2020, 3:41 PM
additional error before this is
Error in ./sanity.json (config:sanity)
May 5, 2020, 3:42 PM
The way to ensure that plugins like
gatsby-plugin-sharp
are installed to your
package.json
file, is installing them from the project root (where the
package.json
file is). For example:
npm install --save gatsby-plugin-sharp
The --save parameter ensures it’s added to the
package.json
file.
I’ll see if I can find some ideas regarding the
Module build failed
error and will respond to the other thread if so. Thanks for reminding me 😉
May 5, 2020, 4:45 PM
Thank you! 😊
May 5, 2020, 4:46 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?