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 {