OnLoadingComplete not working when passing function, but works when console log

[levelingup]

What version of Next.js are you using?

11.1.2

What version of Node.js are you using?

10.20.1

What browser are you using?

chrome

What operating system are you using?

codesandbox

How are you deploying your application?

codesandbox

Describe the Bug

I'm trying to get the naturalWidth and naturalHeight from onLoadingComplete props: https://nextjs.org/docs/api-reference/next/image#onloadingcomplete but its not working? Perhaps I'm doing it wrong?

I have a codesandbox, lines 62, 63: https://codesandbox.io/s/proud-rain-d51sv?file=/pages/index.js

When you upload an image, console log only works, but it doesn't work when I'm trying to pass handleImageLoad function listed in the sandbox.

Expected Behavior

Trying to get naturalWidth and naturalHeight

To Reproduce

https://codesandbox.io/s/proud-rain-d51sv?file=/pages/index.js lines 62, 63

[ijjk]

Hi, it looks like we don't currently call onLoadingComplete for data URLs and that's why you aren't seeing the function called. Note: the console.log is showing since it isn't wrapped in a function so will be executed every time that component is rendered

[styfle]

The issue is that react-images-uploading returns a Data URI and the Image component assumes it was a blur placeholder so it never calls

next.js/packages/next/client/image.tsx

Line 257 in 1389339

if (!img.src.startsWith('data:')) {

This should fix it: #29367

[levelingup]

Thanks @ijjk and @styfle so I was able to convert the data uri into blob, which did work. So for future next.js version, I should be able to get onLoadingComplete with data uri?

[styfle]

@levelingup The fix for Data URI is available in v11.1.3-canary.33

You can try it out with yarn add next@canary, thanks!

[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.