next.js: image optimizer returns 400 when path contains unicode characters
What version of Next.js are you using?
11.0.1
What version of Node.js are you using?
14.17.2
What browser are you using?
firefox
What operating system are you using?
ubuntu
How are you deploying your application?
vercel
Describe the Bug
in a production build, the image optimizer returns with status code 400, and error message “The requested resource isn’t a valid image” when the image src contains non-ascii unicode characters.
Expected Behavior
image optimizer should handle paths with all allowed unicode characters
To Reproduce
- clone https://github.com/stefanprobst/issue-next-image-optimizer and
yarn install - run
yarn build && yarn start - there should be an image visible at http://localhost:3000, but there isn’t. the network panel reports status code 400, error message “The requested resource isn’t a valid image.” which comes from here
- note that when running
yarn devthe image is visible
About this issue
- Original URL
- State: closed
- Created 3 years ago
- Comments: 20 (20 by maintainers)
Commits related to this issue
- URI-encode url parameter in image optimizer (#27671) fixes #27210 maybe related: #19668 currently, the image optimizer returns 400 when an image url contains non-ascii characters. this pr uri-encode... — committed to vercel/next.js by stefanprobst 3 years ago
- Fix image optimization encoding url (#28045) - Fixes #27973 - Reverts #27671 The problem with PR #27671 is that it was encoding too often when it really only needed to solve the bug for `next bui... — committed to vercel/next.js by styfle 3 years ago
- URI-encode url parameter in image optimizer (#27671) fixes #27210 maybe related: #19668 currently, the image optimizer returns 400 when an image url contains non-ascii characters. this pr uri-encode... — committed to blitz-js/next.js by stefanprobst 3 years ago
The fix is available in v11.0.2-canary.25
You can try it out with
yarn add next@canary, thanks!sure, done in #27671
ok, so what appears to be happening is that the “public folder catchall” route does not correctly match here: https://github.com/vercel/next.js/blob/34d418c12d593c4180f805fc51229259caa5e28a/packages/next/server/next-server.ts#L1142
this is what i get here:
you can see that the
publicFilesSetis URI-encoded, but the/leärn.pngpath is not (probably because it is taken from a query param?).i have
de, and my system locale isde_AT. however, checking with firefox nightly (without any languages installed), started withLANG=C firefox-trunkgives the same error:i have now tried in a Windows 10 VM, and can reproduce the same error there as well, so it’s not a linux-specific thing.