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•2y ago

probably need more info tbh

Gaming

Programming

Next Image