Next Image

so my css is breaking on the first load if i use the priority in the <Image>
{shopImg && (
<Image
src={shopImg}
alt="My Image"
width={500}
height={200}
className={clsx('object-cover object-center', {
'h-56 w-full': isImageLoaded,
'hidden ': !isImageLoaded,
})}
onLoadingComplete={handleImageLoad}
priority={true}
/>
)}
{!isImageLoaded && (
<div className="h-56 w-full animate-pulse rounded-t-2xl bg-gray-300"></div>
)}
{shopImg && (
<Image
src={shopImg}
alt="My Image"
width={500}
height={200}
className={clsx('object-cover object-center', {
'h-56 w-full': isImageLoaded,
'hidden ': !isImageLoaded,
})}
onLoadingComplete={handleImageLoad}
priority={true}
/>
)}
{!isImageLoaded && (
<div className="h-56 w-full animate-pulse rounded-t-2xl bg-gray-300"></div>
)}
jsx if i remove the priority everything goes back to working fine, but now onLoadingComplete={handleImageLoad} isnt working and the isImageLoaded is always false
1 Reply
benten
benten2y ago
probably need more info tbh
Want results from more Discord servers?
Add your server