Image Issue on Nginx #56038
Comments
|
Wow, same here: Use to work fine before. |
|
i get the same error but i solve with:
after this i get new error =)) |
|
Reporting the same: https://gist.github.com/igeligel/13473e8702239fa17ec83a89a30f66f8 Some more information:
I think it might be related to this: #55775 Picture was always on the server:
|
|
Same error, some images works well but some image not loaded and throw this error '"url" parameter is valid but upstream response is invalid'. I am using nginx web server. |
|
Remotely it will only work if you put your server IP instead of the domain. |
Yes you right, if we put server IP then it works well, we spend lots of time with this issue. |
|
I downgrade to 13.5.2, now error is "The requested resource isn't a valid image for /assets/icons/gdpr.png received text/html; charset=utf-8" |
|
We did downgrade to 13.5.2 and works well for now :) |
|
Experiencing the same issue. I will backup to 13.5.2 in the mean time. |
|
Experiencing same issue with 13.5.3. In my case running Next.js in Docker container (http) then served over AWS CloudFront (https). Reverting to 13.5.2 fixes it for now. |
|
Same issue with 13.5.3. Downgrade to 13.5.2 works as expected. |
|
I managed to find the solution for version |
|
I have the same problem on next fixing to the |
|
Got this issue too when I upgraded from 13.4.19 to v13.5.3, so had to revert that upgrade. Will probably upgrade to v15.2 based on previous comments in this thread. |
|
Fyi, some of the issues reported here should be fixed by #55988 |
|
I can confirm the issue on |
This comment was marked as off-topic.
This comment was marked as off-topic.
|
It's crazy how Next.js is pushing me more and more to stop putting so much effort into making the latest stable updates if it's only to get these kinds of bugs, I understand why many people have had a bad experience with this framework in the past or recently, it's a shame. Every update is like Russian roulette to see if it hasn't introduced a new bug. |
|
upgrading to Edit: nextjs app setup with api and frontend routes, typoscript, deployed on digital ocean app platform. |
|
Upgrading to |
Fixed in 13.5.4 for me. |
|
|
|
13.5.4 works for me ❤️ |
|
13.5.4 does not fix the issue for me - receiving the following errors: Using app and pages directory behind NGINX. If I'm supposed to be adding some sort of header in my NGINX config, a nudge in the right direction would be greatly appreciated. |
|
I'm getting identical error as @aslakson I'm only on app dir behind NGINX though, not pages. |
|
Hey everyone!! Hope my message can help a lot of you guys out. My guess, there was a bug introduced from an update that is causing all of this. I've spent days trying to fix it, and the only fix is downgrading. MY ISSUES: NOTES: I've gotten all the errors I see on this thread. As for my setup if this is something you have similar:
package.json: "sharp": "^0.32.6",
"react": "18.2.0",
"next": "13.4.12",Server Versions NGINX CONFIG: |
Updated NextJS to 13.5.5 and now receiving this error this is my package.js dependencies I tried rolling back to 13.5.4 but now this error is still showing up |
Try deleting your .next folder. That usually fixes that. |
deleted
|
|
Same problem, 13.5.5:
|
|
It looks like this issue is occuring only when the app is running on a docker container.
and the second method of running on root works but i dont wanna run it on root. i need to run it on a docker container please fix it. |
It'll honestly be best to downgrade and wait for a real stable release. I've been watching this thread as soon as the bug was found, and been waiting until this issue is closed so I can upgrade peacefully. |
|
@dennisofficial @ShreshthTiwari @MixMe Can you file a new issue with reproduction? It's quite impossible for us to see what triggered that error only with the error trace here. |
|
#56038 (comment) The point of the issue is that before images would work fine in production environments either with a Docker Container, or PM2, or proxying with NGINX, etc. Using a trusted SSL, or not, or proxying a domain through CloudFlare, etc. The problem isn't that NextJS broke in its self, the problem is there was a release that made it no longer compatible with the third party services. In my case, the images were working fine, and we updated NextJS. We tried removing NGINX that didn't solve it, however, we turned off CloudFlare SSL proxy, and now the images work fine. So when I access my remote server via direct-IP, the images load fine, once I switch to HTTPS, I get the
The only way we can reproduce this, is if you host a remote server, integrate CloudFlare, and pay for these services that makes a production environment. |
|
Or if there were implementations made that changed the way HTTPS requests are handled, maybe give us a |
|
@huozhi You can put the following code in your middleware, and you can test it no need for paying for anything or hosting anything in production I guess. export async function middleware(request: NextRequest) {
if (
request.nextUrl.pathname.startsWith("/_next/image") &&
request.nextUrl.searchParams.get("url")?.startsWith("/storage")
) {
return NextResponse.rewrite(
new URL(
"https://dreamworldestate.com/wp-content/uploads/2022/10/app-store-apple-download-logo-png-favpng-2BMS9KidgmX2fHMtAhjpVHway-removebg-preview-1.png"
),
);
}
return NextResponse.next();
}Then add a image component in your UI: <Image
src="/storage/does_not_matter_whatever_here"
width={100}
height={100}
/> |
|
On my next deployment, I'll share a link. Either way, this will be a good time to test the latest version, I haven't tried it personally from all the comments I've read. |
@huozhi That's okay I found an image from an old website I did a while ago which is hosted behind cloudflare and updated my last message, you can try it now :) |
|
Is that image hosted on your NextJS server? Just a note, I'm having issues with
|
|
We are having a different issue. I'm having the issue with |
|
Still having problems with this in production. Same error Upgraded to 13.5.5. No change in behavior whatsoever. |
Damn, now I'm worried about checking |
What setup are you using? NGINX, Docker, any proxies? |
@dennisofficial It's behind cloudflare but with an Apache server. |
|
Just docker and then distributed on K8s. No virtual load balancers or anything like that |
Try my suggestion in local if you have time for it, it will possibly produce the error then you can share the repro, I would but it takes a billion years on my machine to install a new version. It most likely doesn't matter what your server is when it's behind Cloudflare anyway... |
|
For |
|
I am using nodejs version 19 in docker. Ah ok thanks this issue is occuring with Nodejs v19, do not use it only use the nodejs 18(hydrogen) LTS latest. |
Its works fine for me since i upgrade to 13.5.5 version |
|
This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you. |
and others
HI,
Image works in development and production (only locally, not remotely), but in nginx I get this error (from nginx console):
my folders
public/assets/icons/gdpr.png
i try to convert the image in webp.. same error
restart server.. same
and this:
"url" parameter is valid but upstream response is invalidi receive from chrome
exemple.com/_next/image?url=%2Fassets%2Ficons%2Fgdpr.png&w=256&q=75Any ideea?
Thanks!
Additional information
NEXT-1680
The text was updated successfully, but these errors were encountered: