Next.js Discord

Discord Forum

Image component none of the onLoadXYZ callbacks are being fired

Unanswered
Dickcissel posted this in #help-forum
Open in Discord
DickcisselOP
I am trying to load a gif with the Image component and all around my app everything works fine except for this one:

const onImageLoadingcomplete = () => {
  console.log("loading completed")
}

<Image
  src={"https://hunt-nft.cdn.boombit.cloud/Gifs/031/0310060102000000000000.gif"}
  style={{ objectFit: "cover", objectPosition: "top center" }}
  height={360}
  width={360}
  onLoadingComplete={onImageLoadingComplete}
  alt={`Image of token`}
/>


I have hundreds of thousands of other gifs/images on the app, but only these seem to cause an issue, the images DO load, I have a spinner on top of the image, and I am relying on the onLoadComplete to know when to remove the loader, if I manually remove it, I can see the image is already loaded. So there is no issue in actually loading the gifs, the only issue is none of the onLoadXYZ callbacks are being fired, I also tried onLoad etc.

The regular html img element does fire its onLoad

0 Replies