`onLoadingComplete()` should pass `naturalWidth` and `naturalHeight`

What version of Next.js are you using?

11.0.2-canary.16

What version of Node.js are you using?

14.16.0

What browser are you using?

Brave (Chromium)

What operating system are you using?

Windows

How are you deploying your application?

next dev

Describe the Bug

onLoadingComplete() event handler does not pass any props.

Expected Behavior

The expected behavior for onLoadingComplete (unless I’m missing the point of this prop) is the same as onLoad for regular old HTML and onLoadedMetadata/onCanPlay for videos – a synthetic react event with .target prop.

To Reproduce

I have a function/event handler that calculates the aspect ratio of an image as soon as it is loaded:

const calcAspectRatio = (loadedMedia) => {

      console.log("loadedMedia", loadedMedia)

      let ratio;

      let width;

      let height; // ... you get the idea. bug can be replicated with a simple console.log though. 

Here’s how I’ve implemented next/image:

<Image layout="fill" src={media} onLoadingComplete={calcAspectRatio} />

and videos:

<video muted autoPlay={autoPlay} loop onLoadedMetadata={calcAspectRatio}>
    <source src={media} />
</video>

Currently the calcAspectRatio returns undefined for next/image - afaiu, this would mean it doesn’t pass any reference to itself when loading is complete

And returns this (expected) for video:

SyntheticBaseEvent {_reactName: "onLoadedMetadata", _targetInst: null, type: "loadedmetadata", nativeEvent: Event, target: video.nfte__media-content, …}

[nickadamson]

see https://github.com/vercel/next.js/discussions/27152 also

[styfle]

If onLoadingComplete() passed back naturalWidth and naturalHeight, would that solve the problem?