NextJS/Image: "url" parameter is valid but upstream response is invalid

Question

I am trying to fetch images from Strapi into my NextJS Application, but whatever I am trying to do I am always getting the error

"url" parameter is valid but upstream response is invalid"

The console is stating:

Failed to load resource: the server responded with a status of 400 (Bad Request)

I already updated "next" to the latest version:

Here is my Snippet from my Image Code:

What else can I try to not receive an error anymore?

Answer 1

I think you didn't add the source to your image domain, probably you should read more on the Image docs here https://nextjs.org/docs/api-reference/next/image

To get rid of this error, create a 'next.config.js' file in the root of your project. Add Domain of all images except local host to the domains array, like so:

module.exports = {
  reactStrictMode: true,
  images: {
    domains: [
      "platform-lookaside.fbsbx.com", //facebook
      "firebasestorage.googleapis.com", //firebase-storage
      "scontent-atl3-2.xx.fbcdn.net", //facebook
      "pbs.twimg.com", //twitter
    ],
  },
};

So in your case since, you're fetching from an external source, don't include 'localhost'