From 1ab98484d542185277baf74c00d1b5a82bc271f5 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Thu, 22 Oct 2020 11:57:59 +0200 Subject: [PATCH 1/5] Add width/maxwidth to fix flexbox lazy loading --- packages/next/client/image.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/next/client/image.tsx b/packages/next/client/image.tsx index 93a3b3732967888..d6392f01e7c6d30 100644 --- a/packages/next/client/image.tsx +++ b/packages/next/client/image.tsx @@ -228,6 +228,8 @@ export default function Image({ divStyle = { position: 'relative', paddingBottom: `${ratio}%`, + maxWidth: '100%', + width, } imgStyle = { height: '100%', From ef79ffc17dbf610b0a651024cc52a468a0884f70 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Thu, 22 Oct 2020 12:08:19 +0200 Subject: [PATCH 2/5] Make lazy loading the default --- packages/next/client/image.tsx | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/packages/next/client/image.tsx b/packages/next/client/image.tsx index d6392f01e7c6d30..18900f982a6934c 100644 --- a/packages/next/client/image.tsx +++ b/packages/next/client/image.tsx @@ -142,7 +142,7 @@ export default function Image({ sizes, unoptimized = false, priority = false, - lazy = false, + lazy, className, quality, width, @@ -156,11 +156,14 @@ export default function Image({ // If priority and lazy are present, log an error and use priority only. if (priority && lazy) { if (process.env.NODE_ENV !== 'production') { - console.error( - `Image with src ${src} has both priority and lazy tags. Only one should be used.` + throw new Error( + `Image with src ${src} has both priority and lazy properties. Only one should be used.` ) } - lazy = false + } + + if (!priority && typeof lazy === 'undefined') { + lazy = true } useEffect(() => { From 6c11e4fadcb277ea4272fa123552bc59851850e2 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Thu, 22 Oct 2020 12:39:59 +0200 Subject: [PATCH 3/5] Add tests and solve another edge case --- packages/next/client/image.tsx | 43 +++++++++++-------- .../image-component/default/pages/flex.js | 19 ++++++++ .../default/test/index.test.js | 21 +++++++++ 3 files changed, 64 insertions(+), 19 deletions(-) create mode 100644 test/integration/image-component/default/pages/flex.js diff --git a/packages/next/client/image.tsx b/packages/next/client/image.tsx index 18900f982a6934c..9c7052f538241b3 100644 --- a/packages/next/client/image.tsx +++ b/packages/next/client/image.tsx @@ -224,15 +224,18 @@ export default function Image({ let divStyle: React.CSSProperties | undefined let imgStyle: React.CSSProperties | undefined + let wrapperStyle: React.CSSProperties | undefined if (typeof height === 'number' && typeof width === 'number' && !unsized) { // const quotient = height / width const ratio = isNaN(quotient) ? 1 : quotient * 100 + wrapperStyle = { + maxWidth: '100%', + width, + } divStyle = { position: 'relative', paddingBottom: `${ratio}%`, - maxWidth: '100%', - width, } imgStyle = { height: '100%', @@ -264,23 +267,25 @@ export default function Image({ } return ( -
- {shouldPreload - ? generatePreload({ - src, - widths: configSizes, - unoptimized, - sizes, - }) - : ''} - +
+
+ {shouldPreload + ? generatePreload({ + src, + widths: configSizes, + unoptimized, + sizes, + }) + : ''} + +
) } diff --git a/test/integration/image-component/default/pages/flex.js b/test/integration/image-component/default/pages/flex.js new file mode 100644 index 000000000000000..9a6acdbb710043c --- /dev/null +++ b/test/integration/image-component/default/pages/flex.js @@ -0,0 +1,19 @@ +import React from 'react' +import Image from 'next/image' + +const Page = () => { + return ( +
+

Hello World

+ +

This is the index page

+ +
+ ) +} + +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 ae92b739c24f655..f698189e3b4f558 100644 --- a/test/integration/image-component/default/test/index.test.js +++ b/test/integration/image-component/default/test/index.test.js @@ -52,6 +52,27 @@ function runTests() { } } }) + + it('should work when using flexbox', async () => { + let browser + try { + browser = await webdriver(appPort, '/flex') + await check(async () => { + const result = await browser.eval( + `document.getElementById('basic-image').width` + ) + if (result === 0) { + throw new Error('Incorrectly loaded image') + } + + return 'result-correct' + }, /result-correct/) + } finally { + if (browser) { + await browser.close() + } + } + }) } describe('Image Component Tests', () => { From 39fb88e5023796872f8a33931651684ee5c5328a Mon Sep 17 00:00:00 2001 From: Steven Date: Thu, 22 Oct 2020 10:20:17 -0400 Subject: [PATCH 4/5] Fix lazy tests --- test/integration/image-component/basic/pages/client-side.js | 4 ++++ test/integration/image-component/basic/pages/index.js | 4 ++++ 2 files changed, 8 insertions(+) diff --git a/test/integration/image-component/basic/pages/client-side.js b/test/integration/image-component/basic/pages/client-side.js index 3b6f3ac8792c9cd..3b0555affca90a7 100644 --- a/test/integration/image-component/basic/pages/client-side.js +++ b/test/integration/image-component/basic/pages/client-side.js @@ -9,6 +9,7 @@ const ClientSide = () => { { id="attribute-test" data-demo="demo-value" src="bar.jpg" + lazy={false} width={300} height={400} /> @@ -25,6 +27,7 @@ const ClientSide = () => { data-demo="demo-value" host="secondary" src="foo2.jpg" + lazy={false} width={300} height={400} /> @@ -32,6 +35,7 @@ const ClientSide = () => { id="unoptimized-image" unoptimized src="https://arbitraryurl.com/foo.jpg" + lazy={false} width={300} height={400} /> diff --git a/test/integration/image-component/basic/pages/index.js b/test/integration/image-component/basic/pages/index.js index de450b29ce67df4..667f567d8201d67 100644 --- a/test/integration/image-component/basic/pages/index.js +++ b/test/integration/image-component/basic/pages/index.js @@ -9,6 +9,7 @@ const Page = () => { { id="attribute-test" data-demo="demo-value" src="bar.jpg" + lazy={false} width={300} height={400} /> @@ -25,6 +27,7 @@ const Page = () => { data-demo="demo-value" host="secondary" src="foo2.jpg" + lazy={false} width={300} height={400} /> @@ -32,6 +35,7 @@ const Page = () => { id="unoptimized-image" unoptimized src="https://arbitraryurl.com/foo.jpg" + lazy={false} width={300} height={400} /> From 7a1bd3d29f84b90ed7f27205ab314ffd844e9ee1 Mon Sep 17 00:00:00 2001 From: Steven Date: Thu, 22 Oct 2020 10:27:32 -0400 Subject: [PATCH 5/5] Throw instead of log error --- packages/next/client/image.tsx | 9 +++++---- .../image-component/typescript/test/index.test.js | 4 ++-- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/packages/next/client/image.tsx b/packages/next/client/image.tsx index 9c7052f538241b3..14cf4abe185f329 100644 --- a/packages/next/client/image.tsx +++ b/packages/next/client/image.tsx @@ -157,7 +157,7 @@ export default function Image({ if (priority && lazy) { if (process.env.NODE_ENV !== 'production') { throw new Error( - `Image with src ${src} has both priority and lazy properties. Only one should be used.` + `Image with src "${src}" has both "priority" and "lazy" properties. Only one should be used.` ) } } @@ -254,14 +254,15 @@ export default function Image({ if (priority) { // console.warn( - `Image with src ${src} has both priority and unsized attributes. Only one should be used.` + `Image with src "${src}" has both "priority" and "unsized" properties. Only one should be used.` ) } } } else { + // if (process.env.NODE_ENV !== 'production') { - console.error( - `Image with src ${src} must use width and height attributes or unsized attribute.` + throw new Error( + `Image with src "${src}" must use "width" and "height" properties or "unsized" property.` ) } } diff --git a/test/integration/image-component/typescript/test/index.test.js b/test/integration/image-component/typescript/test/index.test.js index b163b2b1304d59c..16424caff5ed966 100644 --- a/test/integration/image-component/typescript/test/index.test.js +++ b/test/integration/image-component/typescript/test/index.test.js @@ -45,14 +45,14 @@ describe('TypeScript Image Component', () => { const html = await renderViaHTTP(appPort, '/valid', {}) expect(html).toMatch(/This is valid usage of the Image component/) expect(output).not.toMatch( - /must use width and height attributes or unsized attribute/ + /must use "width" and "height" properties or "unsized" property/ ) }) it('should print error when invalid Image usage', async () => { await renderViaHTTP(appPort, '/invalid', {}) expect(output).toMatch( - /must use width and height attributes or unsized attribute/ + /must use "width" and "height" properties or "unsized" property/ ) }) })