Theo's Typesafe CultTTC
Theo's Typesafe Cult•3y ago•
1 reply
batata

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>
          )}
jsx

if i remove the priority everything goes back to working fine, but now onLoadingComplete={handleImageLoad} isnt working and the isImageLoaded is always false
image.png
image.png
Was this page helpful?