diff --git a/packages/next/client/image.tsx b/packages/next/client/image.tsx
index 1180493a86275..446cdf3a35396 100644
--- a/packages/next/client/image.tsx
+++ b/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'
diff --git a/test/integration/production/pages/static-image.js b/test/integration/production/pages/static-image.js
new file mode 100644
index 0000000000000..c5eb886212e96
--- /dev/null
+++ b/test/integration/production/pages/static-image.js
@@ -0,0 +1,9 @@
+import Image from 'next/image'
+import logo from '../public/vercel.png'
+
+export default () => (
+
+)
diff --git a/test/integration/production/public/vercel.png b/test/integration/production/public/vercel.png
new file mode 100644
index 0000000000000..cb137a989e5ff
Binary files /dev/null and b/test/integration/production/public/vercel.png differ
diff --git a/test/integration/production/test/index.test.js b/test/integration/production/test/index.test.js
index 9548ea5c873a2..cc0bef8a6746b 100644
--- a/test/integration/production/test/index.test.js
+++ b/test/integration/production/test/index.test.js
@@ -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)