TTC
Theo's Typesafe Cult•3y ago
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>
          )}
{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
benton
benton•3y ago
probably need more info tbh

Did you find this page helpful?