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 () => ( +
+

Static Image

+ +
+) 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)