In the onLoadingComplete event of next/image, the naturalWidth and naturalHeight are incorrect

[iiDestiny]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
Platform: linux
Arch: arm64
Version: #102-Ubuntu SMP Fri Nov 5 16:30:45 UTC 2021
Binaries:
Node: 16.16.0
npm: 8.11.0
Yarn: N/A
pnpm: N/A
Relevant packages:
next: 12.2.5
eslint-config-next: 12.0.7
react: 18.2.0
react-dom: 18.2.0

What browser are you using? (if relevant)

chrome 106.0.5249.119

How are you deploying your application? (if relevant)

next start

Describe the Bug

I don't know the actual size of the remote image, I want to display the size of the remote image itself, So I wrapped the following component according to the online tutorial, mainly through onLoadingComplete to get the size of the remote image

import style from './scss/index.module.scss'
import Image from 'next/image'
import { useState, useMemo } from 'react'

const BetterImage = ({ src, alt, layout = 'intrinsic' }) => {
    const [imageSize, setSmageSize] = useState({ width: 1, height: 1 })

    console.log(imageSize)

    return useMemo(() => (
        <div className={style.betterImageWrapper}>
            <Image
                // quality={100}
                src={src}
                alt={alt}
                layout={layout}
                width={imageSize.width}
                height={imageSize.height}
                onLoadingComplete={({ naturalWidth, naturalHeight }) => {
                    console.log(naturalWidth)
                    setSmageSize({ width: naturalWidth, height: naturalHeight })
                }}
            />
        </div>
        // eslint-disable-next-line react-hooks/exhaustive-deps
    ), [src, alt, imageSize.height])
}

export default BetterImage

But the original size obtained is wrong. For example, my original image size is 78px, but the output is 16px

Expected Behavior

I want to get the correct size of the original remote image

Link to reproduction

https://codesandbox.io/s/recursing-dew-7pvsu1?file=/pages/index.jsx

To Reproduce

[iiDestiny]

@toolmantim @sco @chrislloyd @benschwarz Hi

[vercel-release-bot]

This issue has been automatically marked as stale due to two years of inactivity. It will be closed in 7 days unless there’s further input. If you believe this issue is still relevant, please leave a comment or provide updated details. Thank you.