From b9bf68638b49fb593cea04d7a0c244e7f0dc8c53 Mon Sep 17 00:00:00 2001
From: Steven <steven@ceriously.com>
Date: Wed, 4 Nov 2020 16:14:55 -0500
Subject: [PATCH] Disable image optimization for Data URLs (#18804)

This PR disables image optimization and lazy loading for [Data URLs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs), because the image data is already inlined.

Fixes #18372
Fixes #18692
---
 packages/next/client/image.tsx                |  6 +++++
 .../default/test/index.test.js                | 22 ++++++++++++-------
 .../typescript/pages/valid.tsx                |  6 +++++
 .../typescript/test/index.test.js             |  4 +---
 4 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/packages/next/client/image.tsx b/packages/next/client/image.tsx
index d0b317aec0801..f3164d711a02f 100644
--- a/packages/next/client/image.tsx
+++ b/packages/next/client/image.tsx
@@ -310,6 +310,12 @@ export default function Image({
     lazy = false
   }
 
+  if (src && src.startsWith('data:')) {
+    // https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs
+    unoptimized = true
+    lazy = false
+  }
+
   useEffect(() => {
     const target = thisEl.current
 
diff --git a/test/integration/image-component/default/test/index.test.js b/test/integration/image-component/default/test/index.test.js
index 97597bd2e01a5..4cf85eb54c121 100644
--- a/test/integration/image-component/default/test/index.test.js
+++ b/test/integration/image-component/default/test/index.test.js
@@ -56,7 +56,7 @@ async function getSrc(browser, id) {
 }
 
 function getRatio(width, height) {
-  return Math.round((height / width) * 1000)
+  return height / width
 }
 
 function runTests(mode) {
@@ -172,7 +172,10 @@ function runTests(mode) {
       const newHeight = await getComputed(browser, id, 'height')
       expect(newWidth).toBeLessThan(width)
       expect(newHeight).toBeLessThan(height)
-      expect(getRatio(newWidth, newHeight)).toBe(getRatio(width, height))
+      expect(getRatio(newWidth, newHeight)).toBeCloseTo(
+        getRatio(width, height),
+        1
+      )
     } finally {
       if (browser) {
         await browser.close()
@@ -208,7 +211,10 @@ function runTests(mode) {
       const newHeight = await getComputed(browser, id, 'height')
       expect(newWidth).toBeLessThan(width)
       expect(newHeight).toBeLessThan(height)
-      expect(getRatio(newWidth, newHeight)).toBe(getRatio(width, height))
+      expect(getRatio(newWidth, newHeight)).toBeCloseTo(
+        getRatio(width, height),
+        1
+      )
     } finally {
       if (browser) {
         await browser.close()
@@ -244,7 +250,10 @@ function runTests(mode) {
       const newHeight = await getComputed(browser, id, 'height')
       expect(newWidth).toBe(width)
       expect(newHeight).toBe(height)
-      expect(getRatio(newWidth, newHeight)).toBe(getRatio(width, height))
+      expect(getRatio(newWidth, newHeight)).toBeCloseTo(
+        getRatio(width, height),
+        1
+      )
     } finally {
       if (browser) {
         await browser.close()
@@ -356,10 +365,7 @@ function runTests(mode) {
 
         const computedWidth = await getComputed(browser, id, 'width')
         const computedHeight = await getComputed(browser, id, 'height')
-        expect(getRatio(computedWidth, computedHeight) / 1000.0).toBeCloseTo(
-          1.333,
-          1
-        )
+        expect(getRatio(computedWidth, computedHeight)).toBeCloseTo(1.333, 1)
       } finally {
         if (browser) {
           await browser.close()
diff --git a/test/integration/image-component/typescript/pages/valid.tsx b/test/integration/image-component/typescript/pages/valid.tsx
index 10eee3fc7aac8..dede52cea1448 100644
--- a/test/integration/image-component/typescript/pages/valid.tsx
+++ b/test/integration/image-component/typescript/pages/valid.tsx
@@ -38,6 +38,12 @@ const Page = () => {
         width={500}
         height={500}
       />
+      <Image
+        id="data-protocol"
+        src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
+        width={100}
+        height={100}
+      />
       <p id="stubtext">This is valid usage of the Image component</p>
     </div>
   )
diff --git a/test/integration/image-component/typescript/test/index.test.js b/test/integration/image-component/typescript/test/index.test.js
index ca0b6bb158729..743031c968afd 100644
--- a/test/integration/image-component/typescript/test/index.test.js
+++ b/test/integration/image-component/typescript/test/index.test.js
@@ -44,9 +44,7 @@ describe('TypeScript Image Component', () => {
     it('should render the valid Image usage and not print error', async () => {
       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" properties or "layout='fill'" property/
-      )
+      expect(output).not.toMatch(/Error/)
     })
 
     it('should print error when invalid Image usage', async () => {