👀 See Sanity in action: Watch product demo now →

@sanity/image-url - can't get Images to Render with Gatsby

12 replies
Last updated: Aug 12, 2020
Hey y’all,
@sanity/image-url
is being a pain in my bum. I can’t get the images to render. Following along with the example here: https://www.sanity.io/docs/image-url
my code blocks look like:

const urlFor = src => {
  imageUrlBuilder({
    projectId: process.env.GATSBY_SANITY_ID,
    dataset: process.env.GATSBY_SANITY_DATASET,
  }).image(src)
}
and

export const imageGallery = ({ node }) => {
  const { gallery } = node
  return (
    <div>
      {gallery.map((galleryImage, i) => {
        const { image, alt } = galleryImage
        return <img key={i} src={urlFor(image)} alt={alt} />
      })}
    </div>
  )
}

Aug 12, 2020, 4:09 PM
Have you tried chaining
url()
to what you’re returning in urlFor?
like:

 imageUrlBuilder({
    projectId: process.env.GATSBY_SANITY_ID,
    dataset: process.env.GATSBY_SANITY_DATASET,
  }).image(src).url()
Aug 12, 2020, 4:40 PM
Note that the 
url()
 function needs to be the final one in order to output the url as a string.
Aug 12, 2020, 4:41 PM
unfortunately same result 😞
Aug 12, 2020, 5:07 PM
I’ve now tried returning a
console.log(urlFor(image).url())
and it’s returning undefined. I’ve also tried passing in strings instead of env vars and nada. I have no idea why it’s not working 😕
Aug 12, 2020, 6:38 PM
What does
urlFor
return?
Aug 12, 2020, 7:17 PM
undefined
Aug 12, 2020, 7:17 PM
when I pass it the image object
Aug 12, 2020, 7:17 PM
omg. Okay I see what happened. I didn’t specify
return imageUrlBuilder(...)
in my function
Aug 12, 2020, 7:22 PM
DUH. Sorry about that
Aug 12, 2020, 7:22 PM
Yeah, just realized
Aug 12, 2020, 7:22 PM
easy to overlook
Aug 12, 2020, 7:22 PM
Thanks for the reminder 😅😂
Aug 12, 2020, 7:23 PM

Sanity.io – build remarkable experiences at scale

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

Categorized in