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

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.

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? 🙂

Hi! I import the image like this

import p1 from '../../img/hero.JPG'

and I try and render the image like this:

I tried adding

gatsby-transformer-sharp

and

gatsby-image-sharp

but when running npm run dev it didn't compile.

I should add I’m also fine adding images to a page another way. I’m just not sure how

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?

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

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 🤞

wow! thank you so much! I would've been stuck on that forever

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

also, I'm having this issue with the studio https://sanity-io-land.slack.com/archives/C9Z7RC3V1/p1588637937249800

additional error before this is

Error in ./sanity.json (config:sanity)

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:
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 😉

Thank you! 😊