Merge branch 'canary' into with-storybook-styled-jsx-scss

vercel · Nov 4, 2020 · 76f61b6 · 76f61b6
2 parents fcdd297 + b9bf686
commit 76f61b6
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 13 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
 
@@ -572,14 +578,20 @@ function defaultLoader({ root, src, width, quality }: LoaderProps): string {
       )
     }
 
-    if (src && !src.startsWith('/') && configDomains) {
+    if (src.startsWith('//')) {
+      throw new Error(
+        `Failed to parse src "${src}" on \`next/image\`, protocol-relative URL (//) must be changed to an absolute URL (http:// or https://)`
+      )
+    }
+
+    if (!src.startsWith('/') && configDomains) {
       let parsedSrc: URL
       try {
         parsedSrc = new URL(src)
       } catch (err) {
         console.error(err)
         throw new Error(
-          `Failed to parse "${src}" in "next/image", if using relative image it must start with a leading slash "/" or be an absolute URL (http:// or https://)`
+          `Failed to parse src "${src}" on \`next/image\`, if using relative image it must start with a leading slash "/" or be an absolute URL (http:// or https://)`
         )
       }
 

diff --git a/test/integration/image-component/default/pages/invalid-src-proto-relative.js b/test/integration/image-component/default/pages/invalid-src-proto-relative.js
@@ -0,0 +1,13 @@
+import React from 'react'
+import Image from 'next/image'
+
+const Page = () => {
+  return (
+    <div>
+      <p>Invalid Protocol Relative Source</p>
+      <Image src="//assets.example.com/img.jpg" width="10" height="10" />
+    </div>
+  )
+}
+
+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
@@ -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()
@@ -311,6 +320,15 @@ function runTests(mode) {
       )
     })
 
+    it('should show invalid src error when protocol-relative', async () => {
+      const browser = await webdriver(appPort, '/invalid-src-proto-relative')
+
+      await hasRedbox(browser)
+      expect(await getRedboxHeader(browser)).toContain(
+        'Failed to parse src "//assets.example.com/img.jpg" on `next/image`, protocol-relative URL (//) must be changed to an absolute URL (http:// or https://)'
+      )
+    })
+
     it('should show invalid unsized error', async () => {
       const browser = await webdriver(appPort, '/invalid-unsized')
 
@@ -347,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 () => {