Skip to content
Unlock seamless workflows and faster delivery with our latest releases - Join the deep dive
Get help on Slack

How to Pull in Images from Shopify Database - src Error

15 replies
Last updated: Jun 30, 2022
Im trying to display an image like this
<Image src={product.images} width="200" height="200"objectFit="contain" alt=""/>
and it tells me this

Error: Image is missing required "src" property. Make sure you pass "src" in props to the `next/image` component.
but the src is in there? what am I missing?
Jun 30, 2022, 11:02 AM
Did you resolve the image before passing it to the Image component?
Jun 30, 2022, 11:03 AM
“image”: product.image-&gt;
Jun 30, 2022, 11:04 AM
it's coming from a shopify data base all the other stuf works fine but when using image it wont
Jun 30, 2022, 11:04 AM
So the database has a image link from sanity?
Jun 30, 2022, 11:05 AM
what happens if you try to console.log 
product.images
Jun 30, 2022, 11:05 AM
no its not from sanity its from shopify
Jun 30, 2022, 11:05 AM
let me test it
Jun 30, 2022, 11:05 AM
console.log the product.image to see the url
Jun 30, 2022, 11:05 AM
oooh I see now it returns a lot of arrays
Jun 30, 2022, 11:07 AM
how do i get down there and show only 1 of them ?
Jun 30, 2022, 11:11 AM
product.images[0].images[0]
Jun 30, 2022, 11:12 AM
☝️ if there are urls in the images array
Jun 30, 2022, 11:13 AM
got it ty
Jun 30, 2022, 11:13 AM
this is the result
<Image src={product.images[0]}/>
Jun 30, 2022, 11:14 AM
Cool
Jun 30, 2022, 11:14 AM

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.

Get started for freeExplore the demo

Was this answer helpful?