next js image component error "url" parameter is valid but upstream response is invalid

Question

i am fetching data from tmdb api .But the image doesn't load so i open the image in the new tab .then it shows

"url" parameter is valid but upstream response is invalid so how to resolve the issue

Follow this issue on vercel github: https://github.com/vercel/next.js/issues/27973 — Ali Baghban, Dec 14 '22 at 18:48
For me this happened when I had a custom dockerfile to build the app and it wasn't including the next.config.js (and therefore my allowed hosts). — Luke Chadwick, May 20 '23 at 10:49

score 3 · Answer 1 · answered Aug 18 '21 at 20:34

3

Have you added the domain of the images to the next config ?

below is an example:

//next.config.js
module.exports = {
  reactStrictMode: true,
  webp: {
    preset: "default",
    quality: 100,
  },
  images: {
    domains: ["randomuser.me", "firebasestorage.googleapis.com"],
  },
  //Internationalization
  i18n: {
    locales: ["en", "it"],
    defaultLocale: "en",
  },
};

answered Aug 18 '21 at 20:34

Appy Mango

1,298
5
16

From the [NextJS documentation](https://nextjs.org/docs/pages/api-reference/components/image-legacy#domains): "We recommend configuring strict `remotePatterns` instead of `domains` in order to protect your application from malicious users. Only use domains if you own all the content served from the domain." – idleberg Jun 05 '23 at 09:37

score 1 · Answer 2 · answered Nov 19 '22 at 06:05

1

What it worked in my case, was to do a clean reload of browser.

In Chrome, it is CTRL + SHIFT + R

answered Nov 19 '22 at 06:05

Gabriel Arghire

1,992
1
21
34

Alii Isk · Answer 3 · 2021-08-18T19:18:34.727

0

i was facing the same issue although i am hosting my images on cloudinary and it does work if i use the normal <img/> tag so i changed the nextjs version on package.json as bellow and it worked just fine: hope it woud work for u as well

 "dependencies": {
   ...
  "next": "11.0.1",
   ...

 }

edited Aug 18 '21 at 19:18

answered Aug 18 '21 at 19:09

Alii Isk

82
1
9

Fixing to the old next version is not a maintainable solution. At some point you will have to upgrade, no? – Ignas Damunskis Jun 28 '23 at 06:45

score 0 · Answer 4 · answered Sep 08 '21 at 17:06

I had forgotten to add the X-Forwaded-For and X-Real-IP headers in nginx which caused an issue with image domains i had specified in next.config.js

If you are serving with http

    location / {
        proxy_set_header Host            $host;
        proxy_set_header X-Real-IP       $proxy_protocol_addr;
        proxy_set_header X-Forwarded-For $proxy_protocol_addr;
        proxy_pass  http://somehost:port;                                                                               
    }

If you are serving with uWSGI check you are including the params file as per https://uwsgi-docs.readthedocs.io/en/latest/tutorials/Django_and_nginx.html#configure-nginx-for-your-site

next js image component error "url" parameter is valid but upstream response is invalid

4 Answers4

Linked

Related