Encountering an error with the next.js image component, specifically related to a missing "src" property.
Error: Image is missing required "src" property. Make sure you pass "src" in props to the `next/image` component. Received: {}
The src value that is being passed in:
https://res.cloudinary.com/mward82/images/q_auto:eco/v1616884491/1E3EDA11-D657-4FBD-8123-EFE0C5F43AC8_idzuc7/1E3EDA11-D657-4FBD-8123-EFE0C5F43AC8_idzuc7.webp
Verification can be done by using img instead of Image.
Code snippet from components/cover-image.js:
import cn from "classnames";
import Link from "next/link";
import Image from "next/image";
export default function CoverImage({ title, coverImage, slug }) {
const image = (
<Image
src={coverImage?.sourceUrl}
height={coverImage?.mediaDetails.height}
width={coverImage?.mediaDetails.width}
className={cn("shadow-small", {
"hover:shadow-medium transition-shadow duration-200": slug
})}
/>
);
console.log(coverImage);
return (
<div className="sm:mx-0">
{slug ? (
<Link as={`/posts/${slug}`} href="/posts/[slug]">
<a aria-label={title}>{image}</a>
</Link>
) : (
image
)}
</div>
);
}
Configuration in next.config.js:
module.exports = {
images: {
domains: ["res.cloudinary.com"]
}
};
For reference, here is a forked copy of the sandbox:
https://codesandbox.io/s/script-hungryvercelapp-forked-7wd9e