Image issue on production : "url" parameter is valid but upstream response is invalid

mcasters commented 11 months ago

Link to the code that reproduces this issue

https://github.com/mcasters/coucou.git

To Reproduce

Create-next-app
Add an image (jpeg, png, webp) in public folder and create next to the logo a next/image component pointing on the file :

<Image src="/n.jpg" alt="image" width={180} height={230} />

Create a basic custom server (server.js) at root:

` const { createServer } = require('http'); const { parse } = require('url'); const next = require('next');

const port = parseInt(process.env.PORT || '3000', 10) const hostname = 'localhost' const dev = process.env.NODE_ENV !== 'production' const app = next({ dev, hostname, port }) const handle = app.getRequestHandler()

app.prepare().then(() => { createServer((req, res) => { const parsedUrl = parse(req.url, true) handle(req, res, parsedUrl) }).listen(port) }) `

Update commands in package.json :

"scripts": { "dev": "NODE_ENV=development node server.js", "build": "next build", "start": "cross-env NODE_ENV=production node dist/server.js", "lint": "next lint" },

Deploy on Cpanel (Setup Node.js App with server.js as Application startup file)

Current vs. Expected behavior

The home page should display the new image next to the logo, but only the logo is displayed.

Verify canary release

[X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP Tue Aug 9 14:38:15 UTC 2022
Binaries:
  Node: 18.16.1
  npm: 9.5.1
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 13.5.6-canary.1
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: N/A
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Not sure

Additional context

I open this issue since #53715 is closed and next@13.5.5 didn't solve my problem. I also tried v13.5.6-canary.1

Only svg images are displayed, but jpeg, jpg, png, webp throw TypeError: fetch failed. Https or http doesn't change anything.

Log from server : server.log

Log from client : "url" parameter is valid but upstream response is invalid

Network : Résumé URL: http://xxxxxx.fr/_next/image?url=%2Fn.jpg&w=256&q=75 État: 500 Internal Server Error Source: Réseau Adresse: 109.234.162.107:80 Initiateur: xxxxxx.fr:1

Requête GET /_next/image HTTP/1.1 Accept: image/webp,image/avif,image/jxl,image/heic,image/heic-sequence,video/;q=0.8,image/png,image/svg+xml,image/;q=0.8,/;q=0.5 Accept-Encoding: gzip, deflate Accept-Language: fr-FR,fr;q=0.9 Cache-Control: no-cache Connection: keep-alive Host: xxxxxx.fr Pragma: no-cache Referer: http://xxxxxx.fr/ User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Safari/605.1.15

Réponse HTTP/1.1 500 Internal Server Error Connection: keep-alive Date: Tue, 17 Oct 2023 13:00:13 GMT Server: o2switch-PowerBoost-v3 Status: 500 Internal Server Error Transfer-Encoding: Identity X-Powered-By: Phusion Passenger(R) 6.0.18

Paramètres de chaîne de requête url: /n.jpg w: 256 q: 75

Maybe relevant : the image has "txt" type and its name (n.jpeg) is not entered :

ian-cameron commented 7 months ago

Same issue, and we are also using Phusion Passenger application server. It looks like ImageOptimzer in the next server is fetching the original image URL from itself, but is not handling the fact that Passenger does reverse port binding

I'm using Next 14.1 with Passenger, and to work around this error I hardcoded my apps root URL from node_modules/next/dist/server/next-server.js:600 from

const invokeRes = await (0, _invokerequest.invokeRequest)(`${protocol}://${this.fetchHostname || "localhost"}:${this.port}${newReq.url || ""}`, {

to

const invokeRes = await (0, _invokerequest.invokeRequest)(`http://myrealdomain.com${this.port}${newReq.url || ""}`, {

Then images worked again.

EDIT: Noticed this comment, and confirmed the problem went away in the canary version

styfle commented 7 months ago

Noticed https://github.com/vercel/next.js/issues/59123#issuecomment-1921730080, and confirmed the problem went away in the canary version

Yep, this is fixed so I'll close this issue now, thanks!

github-actions[bot] commented 7 months ago

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.

vercel / next.js