diff --git a/packages/next/src/shared/lib/get-img-props.ts b/packages/next/src/shared/lib/get-img-props.ts index 50c80af300451..a4d38baa085e0 100644 --- a/packages/next/src/shared/lib/get-img-props.ts +++ b/packages/next/src/shared/lib/get-img-props.ts @@ -38,6 +38,10 @@ export type ImageProps = Omit< placeholder?: PlaceholderValue blurDataURL?: string unoptimized?: boolean + /** + * @deprecated Use `onLoad` instead. + * @see https://nextjs.org/docs/app/api-reference/components/image#onload + */ onLoadingComplete?: OnLoadingComplete /** * @deprecated Use `fill` prop instead of `layout="fill"` or change import to `next/legacy/image`. @@ -523,6 +527,12 @@ export function getImgProps( } } + if (onLoadingComplete) { + warnOnce( + `Image with src "${src}" is using deprecated "onLoadingComplete" property. Please use the "onLoad" property instead.` + ) + } + for (const [legacyKey, legacyValue] of Object.entries({ layout, objectFit, diff --git a/test/integration/next-image-new/app-dir/test/index.test.ts b/test/integration/next-image-new/app-dir/test/index.test.ts index 1e3b847677758..f57b3204f19f3 100644 --- a/test/integration/next-image-new/app-dir/test/index.test.ts +++ b/test/integration/next-image-new/app-dir/test/index.test.ts @@ -357,6 +357,15 @@ function runTests(mode) { () => browser.eval(`document.getElementById("msg9").textContent`), 'loaded 1 img9 with dimensions 400x400' ) + + if (mode === 'dev') { + const warnings = (await browser.log('browser')) + .map((log) => log.message) + .join('\n') + expect(warnings).toMatch( + /Image with src "(.*)" is using deprecated "onLoadingComplete" property/gm + ) + } }) it('should callback native onLoad with sythetic event', async () => { diff --git a/test/integration/next-image-new/default/test/index.test.ts b/test/integration/next-image-new/default/test/index.test.ts index ff39b4609ed6e..1de5c8271c94d 100644 --- a/test/integration/next-image-new/default/test/index.test.ts +++ b/test/integration/next-image-new/default/test/index.test.ts @@ -358,6 +358,15 @@ function runTests(mode) { () => browser.eval(`document.getElementById("msg9").textContent`), 'loaded 1 img9 with dimensions 400x400' ) + + if (mode === 'dev') { + const warnings = (await browser.log('browser')) + .map((log) => log.message) + .join('\n') + expect(warnings).toMatch( + /Image with src "(.*)" is using deprecated "onLoadingComplete" property/gm + ) + } }) it('should callback native onLoad with sythetic event', async () => {