CODEWITHSUNDEEP
imageperformancenext.jsloadimage-optimization
Darsheel Chudal
Darsheel Chudal

Reputation: 1

Get image dimensions with NEXT JS before image has fully loaded

    <Image
                            src={gallery.image}
                            alt={`Image ${gallery.id + 1}`}
                            width={500}
                            height={500}
                            objectFit="cover"
                            priority
                            onLoadingComplete={({ naturalWidth, naturalHeight }) =>
                                handleImageLoad(gallery.image, naturalWidth, naturalHeight)
                            }
                            className="h-[418px] w-full object-cover hover:cursor-pointer"
                        />

const handleImageLoad = (src: string, width: number, height: number) => { setImageDimensions((prev) => ({ ...prev, [src]: { width, height } })) } const handleImageLoad = (src: string, width: number, height: number) => { setImageDimensions((prev) => ({ ...prev, [src]: { width, height } })) }

I have searched for different resources available online but couldn't find it, Hope there's someone who can help me in this. I am building a photo grid where I want the image to be loaded before the loading is completed. I mean the remote width and height which I should get by destructuring the source. I have found it in javascript where do solve it using setTimeout and stuffs but couldn't find in NEXT JS.

Upvotes: 0

Views: 52

Answers (0)

Related Questions