Fix Firefox image decode error (#26011)

* Fix Firefox image decode error

* Add next/image test to production suite

* update page count test

Author: ijjk

packages/next/client/image.tsx

@@ -269,7 +269,7 @@ function removePlaceholder(
     const handleLoad = () => {
       if (!img.src.startsWith('data:')) {
         const p = 'decode' in img ? img.decode() : Promise.resolve()
-        p.then(() => {
+        p.catch(() => {}).then(() => {
           img.style.filter = 'none'
           img.style.backgroundSize = 'none'
           img.style.backgroundImage = 'none'

test/integration/production/pages/static-image.js

@@ -0,0 +1,9 @@
+import Image from 'next/image'
+import logo from '../public/vercel.png'
+
+export default () => (
+  <div>
+    <p>Static Image</p>
+    <Image src={logo} placeholder="blur" id="static-image" />
+  </div>
+)

test/integration/production/public/vercel.png

@@ -63,8 +63,8 @@ describe('Production Usage', () => {
   afterAll(() => stopApp(server))
 
   it('should contain generated page count in output', async () => {
-    expect(output).toContain('Generating static pages (0/37)')
-    expect(output).toContain('Generating static pages (37/37)')
+    expect(output).toContain('Generating static pages (0/38)')
+    expect(output).toContain('Generating static pages (38/38)')
     // we should only have 4 segments and the initial message logged out
     expect(output.match(/Generating static pages/g).length).toBe(5)
   })
@@ -917,6 +917,55 @@ describe('Production Usage', () => {
     expect(await browser.eval('window.location.pathname')).toBe('/non-existent')
   })
 
+  it('should remove placeholder for next/image correctly', async () => {
+    const browser = await webdriver(context.appPort, '/')
+
+    await browser.eval(`(function() {
+      window.beforeNav = 1
+      window.next.router.push('/static-image')
+    })()`)
+    await browser.waitForElementByCss('#static-image')
+
+    expect(await browser.eval('window.beforeNav')).toBe(1)
+
+    await check(
+      () => browser.elementByCss('img').getComputedCss('background-image'),
+      'none'
+    )
+
+    await browser.eval(`(function() {
+      window.beforeNav = 1
+      window.next.router.push('/')
+    })()`)
+    await browser.waitForElementByCss('.index-page')
+    await waitFor(1000)
+
+    await browser.eval(`(function() {
+      window.beforeNav = 1
+      window.next.router.push('/static-image')
+    })()`)
+    await browser.waitForElementByCss('#static-image')
+
+    expect(await browser.eval('window.beforeNav')).toBe(1)
+
+    await check(
+      () =>
+        browser
+          .elementByCss('#static-image')
+          .getComputedCss('background-image'),
+      'none'
+    )
+
+    for (let i = 0; i < 5; i++) {
+      expect(
+        await browser
+          .elementByCss('#static-image')
+          .getComputedCss('background-image')
+      ).toBe('none')
+      await waitFor(500)
+    }
+  })
+
   dynamicImportTests(context, (p, q) => renderViaHTTP(context.appPort, p, q))
 
   processEnv(context)