Error: Image is missing required "src" property. Make sure you pass "src" in props to the `next/image` component
6 replies
Last updated: Feb 27, 2022
V
Hi,I used
Sanity.io Headless CMS to set up a blog on my Next.js project but I got a warning that I shouldn't use img tag and instead use the Image component.I tried using Image but got an error that there is no src but I added the src, I think the Image and img are used differently.
Does someone have experience working with
Sanity.io and Next/Image? I have installed the sanity Client and next-sanity-image libraries. I also updated next/config with
Sanity.io Headless CMS to set up a blog on my Next.js project but I got a warning that I shouldn't use img tag and instead use the Image component.I tried using Image but got an error that there is no src but I added the src, I think the Image and img are used differently.
Does someone have experience working with
Sanity.io and Next/Image? I have installed the sanity Client and next-sanity-image libraries. I also updated next/config with
module.exports = {
reactStrictMode: true,
images: {
domains: ["<http://cdn.sanity.io|cdn.sanity.io>"],Feb 24, 2022, 5:36 PM
Hey Vincent! It's hard to say without seeing the error, but I'd say it's likely because you're not passing an image asset to your imageUrlBuilder. An image field in the schema is a reference to an asset, so you need to expand it in your query as outlined here . Something like this should get it for you:
I'd also suggest using the
next-sanity package in your project. It'll help streamline your queries and provide some handy Next-specific tools.
'*[ _type == "post" ]{
...,
mainImage->
}'next-sanity package in your project. It'll help streamline your queries and provide some handy Next-specific tools.
Feb 24, 2022, 6:03 PM
V
Hi
I should have elaborated. If I comment out lines 52 to 56 and uncommented lines 57 to 63, that's the error I got.
When you said "because you're not passing an image asset to your imageUrlBuilder. An image field in the schema is a reference to an asset" do you mean I'm not passing the right parameter to the ImageUrlBuilder? Should I pass p.image.source.asset.ref to imageUrlBuilder instead?
user M
the error I Got in the next.js app is:Error: Image is missing required "src" property. Make sure you pass "src" in props to the `next/image` component. Received: {"width":500,"height":500}When you said "because you're not passing an image asset to your imageUrlBuilder. An image field in the schema is a reference to an asset" do you mean I'm not passing the right parameter to the ImageUrlBuilder? Should I pass p.image.source.asset.ref to imageUrlBuilder instead?
Feb 24, 2022, 7:11 PM
I
user B
Here is how I have solved this in Nextjs:
const urlFor = (source: SanityImageSource) => createImageUrlBuilder(config).image(source);
/* projects is prop sent in from projects page */
{projects.map(
({ projectimage }) => (
{projectimage && (
<Image
height="255"
width="500"
src={urlFor(projectimage).url() as string}
alt={name}
role="presentation"
/>
)}
}Feb 24, 2022, 7:14 PM
I
user B
Here is how I have solved this in Nextjs:
```
const urlFor = (source: SanityImageSource) => createImageUrlBuilder(config).image(source);
/* projects is prop sent in from projects page */
{projects.map(
({ projectimage }) => (
{projectimage && (
<Image
height="255"
width="500"
src={urlFor(projectimage).url() as string}
alt={name}
role="presentation"
/>
)}
}
```Feb 24, 2022, 7:14 PM
S
Use this package instead to avoid these hassles. https://www.npmjs.com/package/next-sanity-image
Feb 25, 2022, 2:07 PM
V
thanks for the tips guys. I finally got it!
Feb 27, 2022, 10:18 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.