Unknown event handler property onLoadingComplete. It will be ignored.

[jmonster]

What version of Next.js are you using?

11.0.1

What version of Node.js are you using?

14.7.0

What browser are you using?

Safari

What operating system are you using?

macOS

How are you deploying your application?

Vercel

Describe the Bug

Warning: Unknown event handler property `onLoadingComplete`. It will be ignored.

Expected Behavior

onLoadingComplete should be accepted and called

To Reproduce

<Image
  alt={text}
  width={width}
  height={height}
  src={imageWithCaptions}
  onLoadingComplete={() => { console.log("aloha"); }}
/>

[MathurAditya724]

What version of Next.js are you using?

11.0.1

What version of Node.js are you using?

14.17.0

What browser are you using?

Firefox

What operating system are you using?

Windows

Describe the Bug

I am experiencing somewhat of the same problem. VS Code is showing an error on this property that, this property does not exist in ImageProps. And even though I run the application, the function is not executed.

here is the code I have written

<Image
  src={src}
  alt={alt}
  width={width}
  height={height}
  layout="responsive"
  onLoadingComplete={() => setIsImageLoaded.on()}
/>

I am trying to create an image fade-in component, so when the image is loaded it will set IsImageLoaded to true, show the image and remove the placeholder image. But this function is not getting called!

[sozdayka]

Faced the same issue and solved it by installing beta 11.0.2

[styfle]

The docs have been updated in #27440 to include the version that onLoadingComplete was added.

We just released Next.js 11.1.0 so remember to upgrade with yarn add next@latest.

https://nextjs.org/blog/next-11-1

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.