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
vercel · Nov 4, 2020 · b9bf686 · b9bf686
1 parent 80fd3d5
commit b9bf686
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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 () => {