Hi,
The following snippet is not displaying an image
export default function CoverImage({ title, url, slug}) {
const image = (
<BuilderImage
width={2000}
height={1000}
alt={`${title}`}
className={cn('shadow-small absolute inset-0 w-full h-full object-cover object-top', {
'hover:shadow-medium transition-shadow duration-200': slug,
})}
src={url}
/>
);
return (
<div className="sm:mx-0 relative">
{slug ? (
<Link href={`/blog/${slug}`} aria-label={title}>
{image}
</Link>
) : (
image
)}
</div>
);
}
It does work with a regular img tag
missing images can be see here
i have recently updated next and react. the error in the console is
hydration-error-info.js:63 Warning: React does not recognize the fetchPriority
prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase fetchpriority
instead. If you accidentally passed it from a parent component, remove it from the DOM element.
at img
at eval (webpack-internal:///./node_modules/next/dist/client/image-component.js:134:11)
at eval (webpack-internal:///./node_modules/next/dist/client/image-component.js:244:47)
at BuilderImage
at a
at LinkComponent (webpack-internal:///./node_modules/next/dist/client/link.js:111:19)
at div
at CoverImage (webpack-internal:///./components/cover-image.js:17:11)