_next/image post deployment throws "url parameter is required"

[ashwin-zopsmart]

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/exciting-shamir-7pnyjm

To Reproduce

I have configured parts of my application to use the next/future/image component in Next.js version 12.3.4. In my next.config.js, I have set up the image loader with the following configuration:

images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: '*',
        port: '',
      },
    ],
  },

Issue:

Locally, the images render correctly in both development and production modes, as well as when using a Docker container.
However, after deploying the application to a server, the images are not being rendered.
The error message "url parameter is required" is displayed, even though the URL clearly contains the necessary parameters. - This behavior seems inconsistent and suggests a potential bug in the image rendering logic.

Current vs. Expected behavior

Current Behavior:

Locally, the images render correctly in both development and production modes, as well as when using a Docker container.
After deploying the application to a server, the images are not being rendered.
The error message "url parameter is required" is displayed, even though the URL clearly contains the necessary parameters.

Expected Behavior:

Images should render correctly both locally and after deployment to the server.
The error message "url parameter is required" should not be displayed, and images should load without any issues.

Provide environment information

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 23.4.0: Fri Mar 15 00:19:22 PDT 2024; root:xnu-10063.101.17~1/RELEASE_ARM64_T8112
    Binaries:
      Node: 16.20.2
      npm: 8.19.4
      Yarn: N/A
      pnpm: N/A
    Relevant packages:
      next: 12.3.4
      eslint-config-next: 11.1.4
      react: 17.0.2
      react-dom: 17.0.2

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

Image (next/image)

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

next build (local), Vercel (Deployed), Other (Deployed)

Additional context

I have tested this using the version: 12.3.4

[nikelborm]

It's probably won't be relevant for you, but maybe will be relevant for somebody else looking for the solution of the problem with the same error message. I had next.js behind NGINX. my nginx wasn't properly passing query params to next.js when proxying requests. The solution for me was to change my nginx config from this

location ~ /(.*) {
    proxy_pass http://http_frontend/$1;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Scheme $scheme;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_set_header Host $host;
    proxy_redirect off;
  }

to this

location ~ /(.*) {
    proxy_pass http://http_frontend/$1$is_args$args;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Scheme $scheme;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_set_header Host $host;
    proxy_redirect off;
  }

Added $is_args$args is very important here on the second line