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

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",
   ...

 }

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",
  },
};

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