Skip to content
🎤 Builder Talk: The Story Behind Lady Gaga’s Digital Experience – Register now
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?

Related answers

Get more help in the community Slack

TopicCategoriesFeaturedRepliesLast Updated
Deploying Next JS on VercelJan 20, 2021
Rendering nested block contentJan 18, 2021
DOMParser is not defined at defaultParseHtmlDec 3, 2020
Warning: Data for Page Exceeds the Threshold of 128 kBAug 17, 2022
Custom Document Views - Is it Even Possible to Use the Structure Builder?Apr 21, 2022
Error in Next.js tutorial with event handlers in server components.Feb 28, 2024
How to populate a list of values in a Sanity schema using a separate fileSep 6, 2021
How to fetch an array of images using groq in Sanity.ioMay 21, 2023
Discussion about the root layout for a website and how to properly implement it using Next.js.Apr 4, 2024
Is there a way to write a groq query that checks if a boolean is true, and if so, returns an array of referenced documents?...Feb 1, 2021

Related contributions

Turbo Start Sanity
Template

Featured

The battle-tested Sanity template that powers Roboto Studio's websites

Schema UI - Next.js Sanity Starter
Template

Featured

A Next.js starter template with Next.js 15, Tailwind CSS, shadcn/ui, and Sanity CMS with Live Editing. Get production-ready React components with matching Sanity schemas and queries. Build dynamic pages faster while keeping full control over customization.

Serge Ovcharenko

The Swaddle
Made with Sanity

Featured

A new brand identity to represent a more mature company, to signify The Swaddle’s evolution from publisher to production house, combined with an easier to navigate platform that can surface multiple content types - drawing readers through The Swaddle’s content offering.

Nightjar