🔮 Sanity Create is here. Writing is reinvented. Try now, no developer setup

Issue with displaying images in a website using Sanity.io schema and backend response.

2 replies
Last updated: Sep 28, 2023
Hi Team,
I'm having some errors with displaying images on my website and I'll try to be as specific as possible.

In my schema, I have this:
{
name: "content",
title: "Content",
type: "array",
of: [{ type: "block" }, { type: "image" }],
},

Within sanity studio, I can see the image and when checking with the inspector, I can also see that it has a full cdn url. That's perfect.

The image property on the backend response however is showing up like this (i am using postman):

{
"_type": "image",
"_key": "00f00d67d82b",
"asset": {
"_ref": "image-386f55d56fc3147ea64116cd7365408f557a36a1-1024x1024-png",
"_type": "reference"
}
},

i need this string to be the full cdn url. Otherwise I get an error:

Error: Failed to parse src "image-386f55d56fc3147ea64116cd7365408f557a36a1-1024x1024-png" on
next/image
, if using relative image it must start with a leading slash "/" or be an absolute URL (http:// or https://)
This issue is only happening within the content block. i have a separate image field that works fine and brings in the full cdn url, so it displays as it should on the front end.

Looking forward to hearing any of your thoughts!
Sep 28, 2023, 4:36 PM
You can pass the full asset to the image url builder to get the url.
Sep 28, 2023, 5:09 PM
thank you, rd! that did the trick
Sep 28, 2023, 9:33 PM

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?