next.js: next/image "url" parameter is valid but upstream response is invalid
Verify canary release
- I verified that the issue exists in the latest Next.js canary release
Provide environment information
Operating System:
Platform: win32
Arch: x64
Version: Windows 10 Pro
Binaries:
Node: 18.15.0
npm: 9.5.0
Yarn: N/A
pnpm: N/A
Relevant Packages:
next: 13.4.14-canary.0
eslint-config-next: 13.4.7
react: 18.2.0
react-dom: 18.2.0
typescript: 5.1.3
Next.js Config:
output: N/A
Which area(s) of Next.js are affected? (leave empty if unsure)
Image optimization (next/image, next/legacy/image)
Link to the code that reproduces this issue or a replay of the bug
https://github.com/luca-vogels/bug-next-image
To Reproduce
Run npm run dev or npm run build && npm run start
Describe the Bug
When using next with a custom server like express images are not displayed anymore.
Default next image uses following route for fetching optimized images:
/_next/image/?url=...&w=...&q=...
However opening this route returns following error:
"url" parameter is valid but upstream response is invalid
Expected Behavior
Optimized image is returned
Which browser are you using? (if relevant)
115.0.5790.111
How are you deploying your application? (if relevant)
npm run start
About this issue
- Original URL
- State: closed
- Created a year ago
- Reactions: 31
- Comments: 76 (6 by maintainers)
Commits related to this issue
- chore: downgrade next https://github.com/vercel/next.js/issues/53715#issuecomment-1740625476 — committed to sastrakode/sim-graha-nirmala-web by yrojx 9 months ago
- fix(web/images): Downgraded version to fix images loading See https://github.com/vercel/next.js/issues/53715 — committed to RezaRahemtola/Area by RezaRahemtola 9 months ago
- fix(web/images): Downgraded version to fix images loading See https://github.com/vercel/next.js/issues/53715 — committed to RezaRahemtola/Area by RezaRahemtola 9 months ago
- fix(web/images): Downgraded version to fix images loading See https://github.com/vercel/next.js/issues/53715 — committed to RezaRahemtola/Area by RezaRahemtola 9 months ago
- Fix next version to 13.5.2 in package.json/package-lock.json to avoid image issues in prod env According to https://github.com/vercel/next.js/issues/53715, v13.5.2 has a good chance of working correc... — committed to ABATEAI/frontend by jeffrylew 9 months ago
- fix(core): downgraded to next 13.5.2. due to https://github.com/vercel/next.js/issues/53715 — committed to webhood-io/webhood by markusleh 8 months ago
I found out that this error still exist in 13.5.6. How can I fix this?
Also randomly experiencing this issue. 13.4.9 fixed it for me at the moment… This needs to be a high priority issue if not already. It’s been over a month. Not sure how a company can push so many issues in production releases.
It is still not fixed yet. I upgraded to version 13.5.4 but still have the image error as above. Version 13.5.4 will have the following error message: UND_ERR_INVALID_ARG
For me without any hack, I simply used https://nextjs.org/docs/messages/sharp-missing-in-production by adding
And the issue is gone.
The same issue seems to occur when upgrading from:
I’m experiencing the same issue too in NextJS 14.0.0
Still getting this on
v13.5.3It seems to work locally also when navigating to
/_next/static/media/image.2b36cbd7.pngI do get the image.Not sure why it’s connecting to port
3000when the PORT is set to8080in our custom server?looking into the code it seems to be something going on in the fetch perhaps it’s not using the correct port? https://github.com/stefanprobst/next.js/blob/canary/packages/next/server/image-optimizer.ts#L291
using an import instead of the source fixes the errors for me:
You can read more about this here: https://nextjs.org/docs/app/building-your-application/optimizing/images#local-images
Same issue with NextJS 14
Same problem in NextJS 14.0.0
We have also encountered a similar issue: images loaded via
/_next/image?url=<path>&w=<num>&q=<num>is failing and complaining that"url" parameter is valid but upstream response is invalid.However, when attempting to load the actual image in the
urlparameter it works. This issue is only reproducible in production build and does not seem to affect when running the development server locally.The same problem in NextJS 14
Still getting this on next: v13.5.4
I am giving absolute path value to src attribute.
I seriously can’t believe that I cannot insert and display a simple local png image on a page after 2 hours of trial and error. It works in both dev mode and production mode on localhost but whenever I upload it to my server, it doesn’t show. Interestingly other images work fine. I thought maybe the image’s itself has a problem yet browser nicely loading it if I try to access the url under /_next-static. Of course, using HTML img tag works as well. My server is behind ngnix proxy but I don’t imagine it would be the problem because other images are being loaded fine. Tried with 13.5.2, 5.3, .5.4 and finally 13.4.x. having the same result. In the end, I changed the image format to SVG and it worked (probably because next/image won’t re-encode SVG images). My guess is next/image encoding method has problems. I read somewhere Next will use sharp for resizing if it’s installed. I have it and tried to remove in case it’s related but nothing changed.
Honestly, I have encountered many issues with Next 13, I supported you for your hard work and continue supporting but not being able to add an image to web page is simply a humiliating experience.
@mertafor I think this may be a proxy configuration issue? Try adding:
Mine started working with additional configuration.
Can verify it does not work in production on 13.5.3, downgrading to 13.5.2 fixed it.
I can confirm that 13.5.4 and 13.5.3 dosent work but 13.5.2 did…
13.5.4works for us… Stable and well, don’t see images with 500 errors whatsoever… Had a little heart attack when i noticed the error live… (bad testing in staging on our side… shame)Same here, the issues happening again in production:
I’ve encountered a similar issue in the project I’m working on.
It occurred when I attempted the following version upgrade:
@tkafka are you running behind nginx? Maybe this will help: https://github.com/vercel/next.js/issues/56038#issuecomment-1752876655
corporate sabotage to stay in profit. which version can we revert to to get this up and running again? Edit: I found 13.5.2 doesn’t have this issue
npm install next@13.5.2Can confirm going back to 13.5.2 from 13.5.3 solved it for me.
Confirmed they finally fixed this issue in 13.5.5. #corporateSabotage
This problem also occurs behind a proxy with https enabled, such as nginx or traefik, pointing to the default http server of nextjs. If you fetch the image url using the
httpschema, the image loads and the nexthttpsrequest also works without problem.Did another test and 13.5.4 was completely broken for both approaches. 13.5.2 is working
Doesn’t work for
domainswith 13.5.4 from what I’ve tested with.Confirmed pinning explicitly to
13.5.2also resolves the issue for me. In any other version, I was seeing strange, non-deterministic behavior where sometimes images would succeed, and other times the same images would fail with that500error complaining about theurlparameter.I confirm - still broken in 13.5.4
Ubuntu, node v18.17.1
like @shawngustaw after upgrade to 13.5.4 it’s already fixed
this was broken on 13.5.3 for me but with 13.5.4 seems like it’s fixed 👍
I got the same issue, and it only appear with production build run dev local can not foud it, when I’ using the ubuntu laptop to access into production web the image can load normally ??? but when I using other my laptop or phone to access into production web it’s can not load the images.
my next version: 13.5.3
Can confirm
13.5.4-canary.1fixed the issue for meLooks like this issue might be fixed in #55988
To everyone encountering this issue, Cause I think underlying cause of this issue is OS mismatch as an application works differently on different systems. I was encountering this issue when trying to use local images in public dir. Solution I switched to a cdn for all images. (though other assets like font etc. work as they should). Now in production, I didn’t get that error even in 13.4, 14.
Closing due to my message above.
I also think that more users are finding this issue in the past 3 weeks when they really have a different issue: https://github.com/vercel/next.js/issues/56038
That can be fixed by upgrading to
next@13.5.5If you still have problems with the latest Next.js, please create a new issue with the steps to reproduce the problem, thanks!
@ndizazzo That resolved the problem. Thanks a lot!
Oh my gosh i deployed the wrong branch and wondered why it was not fixed hahahaaa
The latest canary didn’t fix it for me 😕 I am getting
ERR_SSL_WRONG_VERSION_NUMBERas here https://github.com/vercel/next.js/issues/55706#issuecomment-1740034370@Iulian-Dragomirescu Using the latest canary solved the issue for me in the end but that’s good advice anyways thanks https://github.com/vercel/next.js/issues/53715#issuecomment-1737030215
This might help you in your solution: https://github.com/vercel/next.js/issues/56038#issuecomment-1736985533