✨Discover storytelling in the AI age with Pixar's Matthew Luhn at Sanity Connect, May 8th—register now

Trouble rendering images from Sanity media in Next.js, seeking help and finding a solution.

3 replies
Last updated: Oct 3, 2023
I try to render the image from sanity media in nextjs by using
file.asset._ref
but the image remains broken, I've tried multiple aproaches like @sanity/image-url or constructing the url manually or placing directly the filename as it's coming from server, without any luck.
Does anyone can help with this?
Oct 3, 2023, 9:27 AM
Hello Alex,
in your groc queries you can do this :
"image": image.asset->{url, altText}

and then in your component you can do this :
image.url

(sorry for the backticks i’m on my phone)
Oct 3, 2023, 9:46 AM
Nice is working! thank you I'll handle it from here.
Oct 3, 2023, 9:48 AM
Let’s go 🥳
Oct 3, 2023, 9:49 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.

Was this answer helpful?