diff --git a/packages/next/client/image.tsx b/packages/next/client/image.tsx
index 93a3b3732967888..14cf4abe185f329 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(() => {
@@ -221,10 +224,15 @@ 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}%`,
@@ -246,36 +254,39 @@ 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.`
)
}
}
return (
-
- {shouldPreload
- ? generatePreload({
- src,
- widths: configSizes,
- unoptimized,
- sizes,
- })
- : ''}
-
+
+
+ {shouldPreload
+ ? generatePreload({
+ src,
+ widths: configSizes,
+ unoptimized,
+ sizes,
+ })
+ : ''}
+
+
)
}
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}
/>
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', () => {
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/
)
})
})