Make lazy-loading the default for next/image

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) {
     // <Image src="i.png" width=100 height=100 />
     const quotient = height / width
     const ratio = isNaN(quotient) ? 1 : quotient * 100
+    wrapperStyle = {
+      maxWidth: '100%',
+      width,
+    }
     divStyle = {
       position: 'relative',
       paddingBottom: `${ratio}%`,
@@ -259,23 +267,25 @@ export default function Image({
   }
 
   return (
-    <div style={divStyle}>
-      {shouldPreload
-        ? generatePreload({
-            src,
-            widths: configSizes,
-            unoptimized,
-            sizes,
-          })
-        : ''}
-      <img
-        {...rest}
-        {...imgAttributes}
-        className={className}
-        sizes={sizes}
-        ref={thisEl}
-        style={imgStyle}
-      />
+    <div style={wrapperStyle}>
+      <div style={divStyle}>
+        {shouldPreload
+          ? generatePreload({
+              src,
+              widths: configSizes,
+              unoptimized,
+              sizes,
+            })
+          : ''}
+        <img
+          {...rest}
+          {...imgAttributes}
+          className={className}
+          sizes={sizes}
+          ref={thisEl}
+          style={imgStyle}
+        />
+      </div>
     </div>
   )
 }

test/integration/image-component/default/pages/flex.js

@@ -0,0 +1,19 @@
+import React from 'react'
+import Image from 'next/image'
+
+const Page = () => {
+  return (
+    <div>
+      <p>Hello World</p>
+      <Image id="basic-image" src="/test.jpg" width={400} height={400}></Image>
+      <p id="stubtext">This is the index page</p>
+      <style jsx>{`
+        div {
+          display: flex;
+        }
+      `}</style>
+    </div>
+  )
+}
+
+export default Page

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', () => {