Fix image optimization encoding url

Author: styfle

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

test/integration/image-component/unicode/next.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  images: {
+    domains: ['image-optimization-test.vercel.app'],
+  },
+}

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

test/integration/image-component/unicode/public/äöü.png

@@ -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()
+  })
+})

test/integration/image-component/unicode/test/index.test.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}
+      />
     </>
   )
 }

test/integration/image-optimizer/app/pages/index.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, {})