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 the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Was this answer helpful?