URI-encode url parameter in image optimizer (vercel#27671)

fixes vercel#27210
maybe related: vercel#19668

currently, the image optimizer returns 400 when an image url contains non-ascii characters. this pr uri-encodes the `url` query parameter to fix it. also see vercel#27210 (comment)

## Bug

- [x] Related issues linked using `fixes #number`
- [x] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes

packages/next/server/image-optimizer.ts

@@ -69,20 +69,22 @@ export async function imageOptimizer(
   }
 
   const { headers } = req
-  const { url, w, q } = parsedUrl.query
+  const { url: decodedUrl, w, q } = parsedUrl.query
   const mimeType = getSupportedMimeType(MODERN_TYPES, headers.accept)
   let href: string
 
-  if (!url) {
+  if (!decodedUrl) {
     res.statusCode = 400
     res.end('"url" parameter is required')
     return { finished: true }
-  } else if (Array.isArray(url)) {
+  } else if (Array.isArray(decodedUrl)) {
     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-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, {})