diff --git a/packages/next/client/image.tsx b/packages/next/client/image.tsx index 6a793cdae1cd7b8..9fbb4e4e6a82e3d 100644 --- a/packages/next/client/image.tsx +++ b/packages/next/client/image.tsx @@ -368,7 +368,6 @@ export default function Image({ objectFit, objectPosition, onLoadingComplete, - onError, placeholder = 'empty', blurDataURL, ...all diff --git a/test/integration/image-component/default/pages/on-error.js b/test/integration/image-component/default/pages/on-error.js new file mode 100644 index 000000000000000..a976887359ac870 --- /dev/null +++ b/test/integration/image-component/default/pages/on-error.js @@ -0,0 +1,44 @@ +import { useState } from 'react' +import Image from 'next/image' + +const Page = () => { + return ( +
+

Test onError

+

+ If error occured while loading image, native onError should be called. +

+ + + + + ) +} + +function ImageWithMessage({ id, ...props }) { + const [msg, setMsg] = useState('no error occured') + const style = + props.layout === 'fill' + ? { position: 'relative', width: '64px', height: '64px' } + : {} + + return ( + <> +
+ { + const msg = `error occured while loading ${e.target.id}` + setMsg(msg) + }} + {...props} + /> +
+

{msg}

+
+ + ) +} + +export default Page diff --git a/test/integration/image-component/default/test/index.test.js b/test/integration/image-component/default/test/index.test.js index a9d2ab902bad483..13e8bec9a7191ea 100644 --- a/test/integration/image-component/default/test/index.test.js +++ b/test/integration/image-component/default/test/index.test.js @@ -363,6 +363,28 @@ function runTests(mode) { ) }) + it('should callback native onError when error occured while loading image', async () => { + let browser = await webdriver(appPort, '/on-error') + + await check( + () => browser.eval(`document.getElementById("img1").currentSrc`), + /test\.png/ + ) + await check( + () => browser.eval(`document.getElementById("img2").currentSrc`), + //This is an empty data url + /nonexistent-img\.png/ + ) + await check( + () => browser.eval(`document.getElementById("msg1").textContent`), + 'no error occured' + ) + await check( + () => browser.eval(`document.getElementById("msg2").textContent`), + 'error occured while loading img2' + ) + }) + it('should work with image with blob src', async () => { let browser try {