Image Issue on Nginx

[Iulian-Dragomirescu]

HI,
Image works in development and production (only locally, not remotely), but in nginx I get this error (from nginx console):

upstream image response failed for /assets/icons/gdpr.png TypeError: fetch failed
cause: ConnectTimeoutError: Connect Timeout Error

my folders
public/assets/icons/gdpr.png

        <Image
          onError={(e) => {
            console.error("Error loading image:", e);
          }}
          src="/assets/icons/gdpr.png"
          className="rounded-sm"
          alt="gdpr"
          width={100}
          height={100}
        />

i try to convert the image in webp.. same error
restart server.. same

and this:
"url" parameter is valid but upstream response is invalid
i receive from chrome exemple.com/_next/image?url=%2Fassets%2Ficons%2Fgdpr.png&w=256&q=75

Any ideea?

Thanks!

Additional information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 10 Home
Binaries:
  Node: 18.17.1
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 13.5.3
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: N/A
Next.js Config:
  output: N/A

_NEXT-1680

[dennisofficial]

Wow, same here:

Use to work fine before.

[Iulian-Dragomirescu]

i get the same error but i solve with:

after this i get new error =))
cause: ConnectTimeoutError: Connect Timeout Error

[igeligel]

Reporting the same: https://gist.github.com/igeligel/13473e8702239fa17ec83a89a30f66f8

Some more information:

• Deployed on render.com
• Error in logs is only visible when actually opening the image URL: https://www.hackathon.camp/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fhero.eac22fb6.png&w=3840&q=75
• On the main page, it does not throw an error and just shows the alt tag: https://www.hackathon.camp/
• After downgrading to Next 13.5.2 it works again

I think it might be related to this: #55775

Picture was always on the server:

[amit548]

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.

[Paget96]

Remotely it will only work if you put your server IP instead of the domain.

[amit548]

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.

[Iulian-Dragomirescu]

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"

[amit548]

We did downgrade to 13.5.2 and works well for now :)

[aslakson]

Experiencing the same issue. I will backup to 13.5.2 in the mean time.

[cduff]

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.

[garryxiao]

Same issue with 13.5.3. Downgrade to 13.5.2 works as expected.

[Iulian-Dragomirescu]

I managed to find the solution for version 13.5.3 as well. || For Node.js server **

const port = process.env.PORT || 3000;  // this line

// Next js init
const dev = process.env.NODE_ENV !== "production";
const server = next({ dev, dir: process.cwd(), port }); // need to put "port" here
const handle = server.getRequestHandler();

[Jerome1337]

I have the same problem on next 13.5.3 with the following error on every public images "url" parameter is valid but upstream response is invalid.

fixing to the 13.5.2 for now.

[johansunden]

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.