From 044e47170ecfca7e5d258df369e640445f7ff3cc Mon Sep 17 00:00:00 2001
From: Steven <steven@ceriously.com>
Date: Thu, 12 Aug 2021 16:06:12 -0400
Subject: [PATCH 1/9] Fix image optimization encoding url

---
 packages/next/server/image-optimizer.ts       |   8 +-
 .../image-component/unicode/next.config.js    |   5 ++
 .../image-component/unicode/pages/index.js    |  21 +++++
 .../public/\303\244\303\266\303\274.png"      | Bin 0 -> 1545 bytes
 .../unicode/test/index.test.js                |  80 ++++++++++++++++++
 .../image-optimizer/app/pages/index.js        |   6 ++
 .../image-optimizer/test/index.test.js        |   6 --
 7 files changed, 115 insertions(+), 11 deletions(-)
 create mode 100644 test/integration/image-component/unicode/next.config.js
 create mode 100644 test/integration/image-component/unicode/pages/index.js
 create mode 100644 "test/integration/image-component/unicode/public/\303\244\303\266\303\274.png"
 create mode 100644 test/integration/image-component/unicode/test/index.test.js

diff --git a/packages/next/server/image-optimizer.ts b/packages/next/server/image-optimizer.ts
index 4ddb4478f6d01..eabb4ee55a35c 100644
--- a/packages/next/server/image-optimizer.ts
+++ b/packages/next/server/image-optimizer.ts
@@ -69,22 +69,20 @@ export async function imageOptimizer(
   }
 
   const { headers } = req
-  const { url: decodedUrl, w, q } = parsedUrl.query
+  const { url, w, q } = parsedUrl.query
   const mimeType = getSupportedMimeType(MODERN_TYPES, headers.accept)
   let href: string
 
-  if (!decodedUrl) {
+  if (!url) {
     res.statusCode = 400
     res.end('"url" parameter is required')
     return { finished: true }
-  } else if (Array.isArray(decodedUrl)) {
+  } else if (Array.isArray(url)) {
     res.statusCode = 400
     res.end('"url" parameter cannot be an array')
     return { finished: true }
   }
 
-  const url = encodeURI(decodedUrl)
-
   let isAbsolute: boolean
 
   if (url.startsWith('/')) {
diff --git a/test/integration/image-component/unicode/next.config.js b/test/integration/image-component/unicode/next.config.js
new file mode 100644
index 0000000000000..eb554b46c10c0
--- /dev/null
+++ b/test/integration/image-component/unicode/next.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  images: {
+    domains: ['image-optimization-test.vercel.app'],
+  },
+}
diff --git a/test/integration/image-component/unicode/pages/index.js b/test/integration/image-component/unicode/pages/index.js
new file mode 100644
index 0000000000000..3951610b33153
--- /dev/null
+++ b/test/integration/image-component/unicode/pages/index.js
@@ -0,0 +1,21 @@
+import React from 'react'
+import Image from 'next/image'
+import img from '../public/äöü.png'
+
+const Page = () => {
+  return (
+    <div>
+      <h1>Unicode Image URL</h1>
+      <Image id="static" src={img} />
+      <Image id="internal" src="/äöü.png" width={400} height={400} />
+      <Image
+        id="external"
+        src="https://image-optimization-test.vercel.app/äöü.png"
+        width={400}
+        height={400}
+      />
+    </div>
+  )
+}
+
+export default Page
diff --git "a/test/integration/image-component/unicode/public/\303\244\303\266\303\274.png" "b/test/integration/image-component/unicode/public/\303\244\303\266\303\274.png"
new file mode 100644
index 0000000000000000000000000000000000000000..e14fafc5cf3bc63b70914ad20467f40f7fecd572
GIT binary patch
literal 1545
zcmbVM{Xf$Q9A6%~&O#i9S`$MamWNGTo{nv7c{rq_?QHVUW~E6OQi@{ZJcmZ|?7l@Q
zzFgO>LgSLHn<XWZmR1e9QEhvr-0n}fd%s?v*XQ+qe|~zu->=t)6BZh%t7EPMfk1SL
z1Y86JvZ4In(b7~asTB_EYLbzJ#fBxtCqp2a7u(A{gEak&&i%OE5K&=dA02(f0EgVb
zDQO?EwAgXhbPx#1STW3~N_6+*i-&gO&5gIVD)qtd)=yh(VkE{hpxOq=E?Uo-)5z*x
z!Au!iA$YiLAm+*0qggP>?VsKD-2i&HQxQ3+OqX*8S}wK5H8(1QM_f{Jya%lp;-fFQ
z-RxdA9ea)1aI;`EXvn#9J~1_}n?bl%WsA3~x1yF~ZJY?F%5TY1f>Os{GDi>X>C?IS
zC87Oo3ZX}KJ*U`mZ%63leZQDa&ij+|L2Ig&kv$8+G!kJ)!A>IpI0!SpvZ=R*dmxwE
z_A02!zif^Xi?D&?&%f0Tzbc>bI(#PkQsao89{0<O;HyJ%d{us~u4#7f(qCBvEFG}y
z$mcgR{nH@>s~R(I*<bhOAG@=!TLI3QZSl~$#ynA%{q2nNt9MaWhYxvH7CwsE2|+{+
zWNy3=JJ~wD{+zY){(Y-zbDREYrFTk>hM>py`YIH=n8s(l<+!VhFb)fj#H;uE`npo7
zY;0_#QmGRY6Algzb}0{05Qr9vi1UjyHCq}CIyy~&Xo)lk4660;XBm=IbzH;Vwux!6
z@U`%Q<6`U_r^#vHXzMH%_g}z&^bvih;Naksl&3F)p7Kn#$+goa*xhsUD|t?H%CawT
z>JQ8!^fPzDF6c8waZPU1$^P~{X*y_EN`KC=6nc}~iEX#>ud*u)-<c(ECDgZ=fJ?FU
z=RxfB5wYcd5g3~Ds{zWByUYt5vytC3(Onq!#k9s~3R$1>GT=qZK~K!#eMKri|K2@v
zeX<oPU6RW_0Wx}otjd0Rq|<bcZ3X%nhHc`@rieN;6Xgww%c3@6XR)#ndbgPfPp(@|
zD6%4bI3!-fx>7|gqiZ-a27vkY(m>jlb*A45J^WhNqUd5svx=i!WlyGoDxyIkDCJw8
zl1RKs=y0j+xtSIh@AZ-SU-~z%d7|iJXK0I}nj!QZ_;_V0t%N>WpH)B+RT91Kkuhzx
zSp{CL@O&X!puOb5enarY#IKV0$GfaZ<5QCF#q6Ih66Bl1Pk?cT!sCl5^YK4KUf8=r
z`aO#WUfA<6@Z|tBgFYm!h8b-eKV4c&$3bTW&<9YGGZ&`xG#9~EHI4;**~o$2bOc^F
z)xqxjhTZjF)wtZ04Ns<6mIBW?61;SKUp<nNzzqML!V7MrO(a{WPYl23di`0PQ`5~y
zcPCLSBDD7}@EwwH!cb{7FHmSBCy^t&VBH;NAI<5MQA$`h)}Z?}{7RqQFt6q;BVF?N
zND1(m<Gw`!JWi;Oss!=v*;CSLWNJXe#&Jm>&Ix#QrYF;SY_@rCeH2X2*tJ$*pAIHb
zh#ej+0ZbcVCs7JzV7TsL6Jyyhc?vB<vwtIpHDV2z`!j%t9U@+ZI{9a5U{<TzgOG#g
zRTL`#A&%>AKW|d~E=#`(Epz?bhZI(;xeQ`sbe2CXvFp-!)9gAPmnDWWTsf>26XSP@
zv&2i`WrNZNf%ZoawxTiv7?Jj|6+NW@o>r`=449DMidcqyfhe1CUhQqXbvCSyC1#>!
z&TQ9Z<O8TIWiCGhP-m}i@6n<GN3<KbWug(0l(78KobtP^8Yf*4$cND{EaZN>pp%MX
zY5qJSn%b<gxEz}fPxiSlVfQuc^byR&Cs*+cr^sDhFodlbJ?U1y8)3~DyrtK#awd9q
zjoApl;Y1Ez*&`=n;zDd!iM&7SY~%;}qr;tiN)C0=npDV7c^|hGDII4Iy46PrXcgD%
xLUYW?R+FhMDo6ZGJgO?$hXbH2{~zvvxf|NNfe$>SF+=@PAVhp9?wWsW-al19&OZPE

literal 0
HcmV?d00001

diff --git a/test/integration/image-component/unicode/test/index.test.js b/test/integration/image-component/unicode/test/index.test.js
new file mode 100644
index 0000000000000..55e4f735ebaf5
--- /dev/null
+++ b/test/integration/image-component/unicode/test/index.test.js
@@ -0,0 +1,80 @@
+/* eslint-env jest */
+
+import {
+  findPort,
+  killApp,
+  launchApp,
+  nextBuild,
+  nextStart,
+} from 'next-test-utils'
+import webdriver from 'next-webdriver'
+//import fetch from 'node-fetch'
+import { join } from 'path'
+
+jest.setTimeout(1000 * 60)
+
+const appDir = join(__dirname, '../')
+
+let appPort
+let app
+let browser
+
+function runTests() {
+  it('should load static unicode image', async () => {
+    const src = await browser.elementById('static').getAttribute('src')
+    expect(src).toMatch(
+      /_next%2Fstatic%2Fimage%2Fpublic%2F%C3%A4%C3%B6%C3%BC(.+)png/
+    )
+    const res = await fetch(src)
+    expect(res.status).toBe(200)
+  })
+
+  it('should load internal unicode image', async () => {
+    const src = await browser.elementById('internal').getAttribute('src')
+    expect(src).toMatch('/_next/image?url=%2F%C3%A4%C3%B6%C3%BC.png')
+    const res = await fetch(src)
+    expect(res.status).toBe(200)
+  })
+
+  it('should load external unicode image', async () => {
+    const src = await browser.elementById('external').getAttribute('src')
+    expect(src).toMatch(
+      '/_next/image?url=https%3A%2F%2Fimage-optimization-test.vercel.app%2F%C3%A4%C3%B6%C3%BC.png'
+    )
+    const res = await fetch(src)
+    expect(res.status).toBe(200)
+  })
+}
+
+describe('Image Component Unicode Image URL', () => {
+  describe('dev mode', () => {
+    beforeAll(async () => {
+      appPort = await findPort()
+      app = await launchApp(appDir, appPort)
+      browser = await webdriver(appPort, '/')
+    })
+    afterAll(() => {
+      killApp(app)
+      if (browser) {
+        browser.close()
+      }
+    })
+    runTests()
+  })
+
+  describe('server mode', () => {
+    beforeAll(async () => {
+      await nextBuild(appDir)
+      appPort = await findPort()
+      app = await nextStart(appDir, appPort)
+      browser = await webdriver(appPort, '/')
+    })
+    afterAll(() => {
+      killApp(app)
+      if (browser) {
+        browser.close()
+      }
+    })
+    runTests()
+  })
+})
diff --git a/test/integration/image-optimizer/app/pages/index.js b/test/integration/image-optimizer/app/pages/index.js
index faab57ef78818..aef636aecee01 100644
--- a/test/integration/image-optimizer/app/pages/index.js
+++ b/test/integration/image-optimizer/app/pages/index.js
@@ -6,6 +6,12 @@ function Home() {
     <>
       <h1>Image Optimizer Home</h1>
       <Image src={Logo} />
+      <Image src="/äöü.png" width={200} height={200} />
+      <Image
+        src="https://image-optimization-test.vercel.app/äöü.png"
+        width={200}
+        height={200}
+      />
     </>
   )
 }
diff --git a/test/integration/image-optimizer/test/index.test.js b/test/integration/image-optimizer/test/index.test.js
index 9faab437aa3d7..80731b6b7305f 100644
--- a/test/integration/image-optimizer/test/index.test.js
+++ b/test/integration/image-optimizer/test/index.test.js
@@ -55,12 +55,6 @@ function runTests({ w, isDev, domains = [], ttl, isSharp }) {
     expect(await res.text()).toMatch(/Image Optimizer Home/m)
   })
 
-  it('should handle non-ascii characters in image url', async () => {
-    const query = { w, q: 90, url: '/äöü.png' }
-    const res = await fetchViaHTTP(appPort, '/_next/image', query, {})
-    expect(res.status).toBe(200)
-  })
-
   it('should maintain animated gif', async () => {
     const query = { w, q: 90, url: '/animated.gif' }
     const res = await fetchViaHTTP(appPort, '/_next/image', query, {})

From 00e5274ed5fe639ed108b675052480a9dfcb9745 Mon Sep 17 00:00:00 2001
From: Steven <steven@ceriously.com>
Date: Thu, 12 Aug 2021 16:11:27 -0400
Subject: [PATCH 2/9] Revert unnecesary change

---
 test/integration/image-optimizer/app/pages/index.js | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/test/integration/image-optimizer/app/pages/index.js b/test/integration/image-optimizer/app/pages/index.js
index aef636aecee01..faab57ef78818 100644
--- a/test/integration/image-optimizer/app/pages/index.js
+++ b/test/integration/image-optimizer/app/pages/index.js
@@ -6,12 +6,6 @@ function Home() {
     <>
       <h1>Image Optimizer Home</h1>
       <Image src={Logo} />
-      <Image src="/äöü.png" width={200} height={200} />
-      <Image
-        src="https://image-optimization-test.vercel.app/äöü.png"
-        width={200}
-        height={200}
-      />
     </>
   )
 }

From 2a5052f55f1c497d02c02005ccd7ba2af44abdb8 Mon Sep 17 00:00:00 2001
From: Steven <steven@ceriously.com>
Date: Thu, 12 Aug 2021 16:40:08 -0400
Subject: [PATCH 3/9] Add another test for percent

---
 .../image-component/unicode/pages/index.js    |   7 ++++++
 .../image-component/unicode/public/50%.jpg    | Bin 0 -> 6765 bytes
 .../unicode/test/index.test.js                |  20 ++++++++++++++++++
 3 files changed, 27 insertions(+)
 create mode 100644 test/integration/image-component/unicode/public/50%.jpg

diff --git a/test/integration/image-component/unicode/pages/index.js b/test/integration/image-component/unicode/pages/index.js
index 3951610b33153..cc5a0a7f0e8e6 100644
--- a/test/integration/image-component/unicode/pages/index.js
+++ b/test/integration/image-component/unicode/pages/index.js
@@ -14,6 +14,13 @@ const Page = () => {
         width={400}
         height={400}
       />
+      <Image id="internal-precent" src="/50%.jpg" width={200} height={200} />
+      <Image
+        id="external-precent"
+        src="https://image-optimization-test.vercel.app/50%.jpg"
+        width={200}
+        height={200}
+      />
     </div>
   )
 }
diff --git a/test/integration/image-component/unicode/public/50%.jpg b/test/integration/image-component/unicode/public/50%.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..d536c882412ed3df0dc162823ca5146bcc033499
GIT binary patch
literal 6765
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

literal 0
HcmV?d00001

diff --git a/test/integration/image-component/unicode/test/index.test.js b/test/integration/image-component/unicode/test/index.test.js
index 55e4f735ebaf5..b72b3681aa6e4 100644
--- a/test/integration/image-component/unicode/test/index.test.js
+++ b/test/integration/image-component/unicode/test/index.test.js
@@ -44,6 +44,26 @@ function runTests() {
     const res = await fetch(src)
     expect(res.status).toBe(200)
   })
+
+  it('should load internal percent image', async () => {
+    const src = await browser
+      .elementById('internal-precent')
+      .getAttribute('src')
+    expect(src).toMatch('/_next/image?url=%2F50%25.jpg')
+    const res = await fetch(src)
+    expect(res.status).toBe(200)
+  })
+
+  it('should load external percent image', async () => {
+    const src = await browser
+      .elementById('external-precent')
+      .getAttribute('src')
+    expect(src).toMatch(
+      '/_next/image?url=https%3A%2F%2Fimage-optimization-test.vercel.app%2F50%25.jpg'
+    )
+    const res = await fetch(src)
+    expect(res.status).toBe(200)
+  })
 }
 
 describe('Image Component Unicode Image URL', () => {

From 8dd6bf2f0de15b63134c636fdc1491d169497f5f Mon Sep 17 00:00:00 2001
From: Steven <steven@ceriously.com>
Date: Thu, 12 Aug 2021 17:00:38 -0400
Subject: [PATCH 4/9] Fix test with space

---
 .../image-component/unicode/next.config.js      |   5 ++++-
 .../image-component/unicode/pages/index.js      |  11 ++++++++---
 .../image-component/unicode/public/50%.jpg      | Bin 6765 -> 0 bytes
 .../unicode/public/hello world.jpg              | Bin 0 -> 1545 bytes
 .../image-component/unicode/test/index.test.js  |  16 ++++++----------
 5 files changed, 18 insertions(+), 14 deletions(-)
 delete mode 100644 test/integration/image-component/unicode/public/50%.jpg
 create mode 100644 test/integration/image-component/unicode/public/hello world.jpg

diff --git a/test/integration/image-component/unicode/next.config.js b/test/integration/image-component/unicode/next.config.js
index eb554b46c10c0..5bd1816d4fb21 100644
--- a/test/integration/image-component/unicode/next.config.js
+++ b/test/integration/image-component/unicode/next.config.js
@@ -1,5 +1,8 @@
 module.exports = {
   images: {
-    domains: ['image-optimization-test.vercel.app'],
+    domains: [
+      'image-optimization-test.vercel.app',
+      'firebasestorage.googleapis.com',
+    ],
   },
 }
diff --git a/test/integration/image-component/unicode/pages/index.js b/test/integration/image-component/unicode/pages/index.js
index cc5a0a7f0e8e6..bdc4ea840f65b 100644
--- a/test/integration/image-component/unicode/pages/index.js
+++ b/test/integration/image-component/unicode/pages/index.js
@@ -14,10 +14,15 @@ const Page = () => {
         width={400}
         height={400}
       />
-      <Image id="internal-precent" src="/50%.jpg" width={200} height={200} />
       <Image
-        id="external-precent"
-        src="https://image-optimization-test.vercel.app/50%.jpg"
+        id="internal-space"
+        src="/hello%20world.jpg"
+        width={200}
+        height={200}
+      />
+      <Image
+        id="external-space"
+        src="https://image-optimization-test.vercel.app/hello%20world.jpg"
         width={200}
         height={200}
       />
diff --git a/test/integration/image-component/unicode/public/50%.jpg b/test/integration/image-component/unicode/public/50%.jpg
deleted file mode 100644
index d536c882412ed3df0dc162823ca5146bcc033499..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 6765
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

diff --git a/test/integration/image-component/unicode/public/hello world.jpg b/test/integration/image-component/unicode/public/hello world.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..e14fafc5cf3bc63b70914ad20467f40f7fecd572
GIT binary patch
literal 1545
zcmbVM{Xf$Q9A6%~&O#i9S`$MamWNGTo{nv7c{rq_?QHVUW~E6OQi@{ZJcmZ|?7l@Q
zzFgO>LgSLHn<XWZmR1e9QEhvr-0n}fd%s?v*XQ+qe|~zu->=t)6BZh%t7EPMfk1SL
z1Y86JvZ4In(b7~asTB_EYLbzJ#fBxtCqp2a7u(A{gEak&&i%OE5K&=dA02(f0EgVb
zDQO?EwAgXhbPx#1STW3~N_6+*i-&gO&5gIVD)qtd)=yh(VkE{hpxOq=E?Uo-)5z*x
z!Au!iA$YiLAm+*0qggP>?VsKD-2i&HQxQ3+OqX*8S}wK5H8(1QM_f{Jya%lp;-fFQ
z-RxdA9ea)1aI;`EXvn#9J~1_}n?bl%WsA3~x1yF~ZJY?F%5TY1f>Os{GDi>X>C?IS
zC87Oo3ZX}KJ*U`mZ%63leZQDa&ij+|L2Ig&kv$8+G!kJ)!A>IpI0!SpvZ=R*dmxwE
z_A02!zif^Xi?D&?&%f0Tzbc>bI(#PkQsao89{0<O;HyJ%d{us~u4#7f(qCBvEFG}y
z$mcgR{nH@>s~R(I*<bhOAG@=!TLI3QZSl~$#ynA%{q2nNt9MaWhYxvH7CwsE2|+{+
zWNy3=JJ~wD{+zY){(Y-zbDREYrFTk>hM>py`YIH=n8s(l<+!VhFb)fj#H;uE`npo7
zY;0_#QmGRY6Algzb}0{05Qr9vi1UjyHCq}CIyy~&Xo)lk4660;XBm=IbzH;Vwux!6
z@U`%Q<6`U_r^#vHXzMH%_g}z&^bvih;Naksl&3F)p7Kn#$+goa*xhsUD|t?H%CawT
z>JQ8!^fPzDF6c8waZPU1$^P~{X*y_EN`KC=6nc}~iEX#>ud*u)-<c(ECDgZ=fJ?FU
z=RxfB5wYcd5g3~Ds{zWByUYt5vytC3(Onq!#k9s~3R$1>GT=qZK~K!#eMKri|K2@v
zeX<oPU6RW_0Wx}otjd0Rq|<bcZ3X%nhHc`@rieN;6Xgww%c3@6XR)#ndbgPfPp(@|
zD6%4bI3!-fx>7|gqiZ-a27vkY(m>jlb*A45J^WhNqUd5svx=i!WlyGoDxyIkDCJw8
zl1RKs=y0j+xtSIh@AZ-SU-~z%d7|iJXK0I}nj!QZ_;_V0t%N>WpH)B+RT91Kkuhzx
zSp{CL@O&X!puOb5enarY#IKV0$GfaZ<5QCF#q6Ih66Bl1Pk?cT!sCl5^YK4KUf8=r
z`aO#WUfA<6@Z|tBgFYm!h8b-eKV4c&$3bTW&<9YGGZ&`xG#9~EHI4;**~o$2bOc^F
z)xqxjhTZjF)wtZ04Ns<6mIBW?61;SKUp<nNzzqML!V7MrO(a{WPYl23di`0PQ`5~y
zcPCLSBDD7}@EwwH!cb{7FHmSBCy^t&VBH;NAI<5MQA$`h)}Z?}{7RqQFt6q;BVF?N
zND1(m<Gw`!JWi;Oss!=v*;CSLWNJXe#&Jm>&Ix#QrYF;SY_@rCeH2X2*tJ$*pAIHb
zh#ej+0ZbcVCs7JzV7TsL6Jyyhc?vB<vwtIpHDV2z`!j%t9U@+ZI{9a5U{<TzgOG#g
zRTL`#A&%>AKW|d~E=#`(Epz?bhZI(;xeQ`sbe2CXvFp-!)9gAPmnDWWTsf>26XSP@
zv&2i`WrNZNf%ZoawxTiv7?Jj|6+NW@o>r`=449DMidcqyfhe1CUhQqXbvCSyC1#>!
z&TQ9Z<O8TIWiCGhP-m}i@6n<GN3<KbWug(0l(78KobtP^8Yf*4$cND{EaZN>pp%MX
zY5qJSn%b<gxEz}fPxiSlVfQuc^byR&Cs*+cr^sDhFodlbJ?U1y8)3~DyrtK#awd9q
zjoApl;Y1Ez*&`=n;zDd!iM&7SY~%;}qr;tiN)C0=npDV7c^|hGDII4Iy46PrXcgD%
xLUYW?R+FhMDo6ZGJgO?$hXbH2{~zvvxf|NNfe$>SF+=@PAVhp9?wWsW-al19&OZPE

literal 0
HcmV?d00001

diff --git a/test/integration/image-component/unicode/test/index.test.js b/test/integration/image-component/unicode/test/index.test.js
index b72b3681aa6e4..53e224848dec5 100644
--- a/test/integration/image-component/unicode/test/index.test.js
+++ b/test/integration/image-component/unicode/test/index.test.js
@@ -45,21 +45,17 @@ function runTests() {
     expect(res.status).toBe(200)
   })
 
-  it('should load internal percent image', async () => {
-    const src = await browser
-      .elementById('internal-precent')
-      .getAttribute('src')
-    expect(src).toMatch('/_next/image?url=%2F50%25.jpg')
+  it('should load internal image with space', async () => {
+    const src = await browser.elementById('internal-space').getAttribute('src')
+    expect(src).toMatch('/_next/image?url=%2Fhello%2520world.jpg')
     const res = await fetch(src)
     expect(res.status).toBe(200)
   })
 
-  it('should load external percent image', async () => {
-    const src = await browser
-      .elementById('external-precent')
-      .getAttribute('src')
+  it('should load external image with space', async () => {
+    const src = await browser.elementById('external-space').getAttribute('src')
     expect(src).toMatch(
-      '/_next/image?url=https%3A%2F%2Fimage-optimization-test.vercel.app%2F50%25.jpg'
+      '/_next/image?url=https%3A%2F%2Fimage-optimization-test.vercel.app%2Fhello%2520world.jpg'
     )
     const res = await fetch(src)
     expect(res.status).toBe(200)

From fbbef8f521f26c58358f9c26c63e7da7b88e5939 Mon Sep 17 00:00:00 2001
From: Steven <steven@ceriously.com>
Date: Thu, 12 Aug 2021 17:40:26 -0400
Subject: [PATCH 5/9] Remove unused domain

Co-authored-by: JJ Kasper <jj@jjsweb.site>
---
 test/integration/image-component/unicode/next.config.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/test/integration/image-component/unicode/next.config.js b/test/integration/image-component/unicode/next.config.js
index 5bd1816d4fb21..34efa8452097f 100644
--- a/test/integration/image-component/unicode/next.config.js
+++ b/test/integration/image-component/unicode/next.config.js
@@ -2,7 +2,6 @@ module.exports = {
   images: {
     domains: [
       'image-optimization-test.vercel.app',
-      'firebasestorage.googleapis.com',
     ],
   },
 }

From c74923c89b5eb3a2ee752dfa40e240c005e8c48a Mon Sep 17 00:00:00 2001
From: Steven <steven@ceriously.com>
Date: Thu, 12 Aug 2021 19:10:59 -0400
Subject: [PATCH 6/9] Fix next server serving unicode files

---
 packages/next/server/next-server.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/next/server/next-server.ts b/packages/next/server/next-server.ts
index d62b6ded0d4b5..db9396c56eada 100644
--- a/packages/next/server/next-server.ts
+++ b/packages/next/server/next-server.ts
@@ -1158,7 +1158,11 @@ export default class Server {
             pathParts.splice(0, basePathParts.length)
           }
 
-          const path = `/${pathParts.join('/')}`
+          let path = `/${pathParts.join('/')}`
+
+          if (!publicFiles.has(path)) {
+            path = encodeURI(path)
+          }
 
           if (publicFiles.has(path)) {
             await this.serveStatic(

From 9136c598ab69edbaa896252e140aa5ddd41b5f3a Mon Sep 17 00:00:00 2001
From: Steven <steven@ceriously.com>
Date: Thu, 12 Aug 2021 19:14:25 -0400
Subject: [PATCH 7/9] Add old test back

---
 test/integration/image-optimizer/test/index.test.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/test/integration/image-optimizer/test/index.test.js b/test/integration/image-optimizer/test/index.test.js
index 80731b6b7305f..9faab437aa3d7 100644
--- a/test/integration/image-optimizer/test/index.test.js
+++ b/test/integration/image-optimizer/test/index.test.js
@@ -55,6 +55,12 @@ function runTests({ w, isDev, domains = [], ttl, isSharp }) {
     expect(await res.text()).toMatch(/Image Optimizer Home/m)
   })
 
+  it('should handle non-ascii characters in image url', async () => {
+    const query = { w, q: 90, url: '/äöü.png' }
+    const res = await fetchViaHTTP(appPort, '/_next/image', query, {})
+    expect(res.status).toBe(200)
+  })
+
   it('should maintain animated gif', async () => {
     const query = { w, q: 90, url: '/animated.gif' }
     const res = await fetchViaHTTP(appPort, '/_next/image', query, {})

From 146565cd78de1f69f6ac1b739c3ccfc23b04ae02 Mon Sep 17 00:00:00 2001
From: Steven <steven@ceriously.com>
Date: Thu, 12 Aug 2021 19:33:22 -0400
Subject: [PATCH 8/9] Add comment

---
 packages/next/server/next-server.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/next/server/next-server.ts b/packages/next/server/next-server.ts
index db9396c56eada..f3d90464fb318 100644
--- a/packages/next/server/next-server.ts
+++ b/packages/next/server/next-server.ts
@@ -1161,6 +1161,9 @@ export default class Server {
           let path = `/${pathParts.join('/')}`
 
           if (!publicFiles.has(path)) {
+            // In `next-dev-server.ts`, we ensure encoded paths match
+            // decoded paths on the filesystem. So we need do the
+            // opposite here: make sure decoded paths match encoded.
             path = encodeURI(path)
           }
 

From 9ce365ef03a37a62f47c6a45f547df03847b3ee6 Mon Sep 17 00:00:00 2001
From: Steven <steven@ceriously.com>
Date: Thu, 12 Aug 2021 19:49:02 -0400
Subject: [PATCH 9/9] Fix lint

---
 test/integration/image-component/unicode/next.config.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/test/integration/image-component/unicode/next.config.js b/test/integration/image-component/unicode/next.config.js
index 34efa8452097f..eb554b46c10c0 100644
--- a/test/integration/image-component/unicode/next.config.js
+++ b/test/integration/image-component/unicode/next.config.js
@@ -1,7 +1,5 @@
 module.exports = {
   images: {
-    domains: [
-      'image-optimization-test.vercel.app',
-    ],
+    domains: ['image-optimization-test.vercel.app'],
   },
 }