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

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.