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?

Dorelle

Please make sure to post code and errors as text directly to the question (and not as images), and format them appropriately. – Bein

Answer 1

In most cases this the error with server itself where your images are hosted. check the URL in new tab to see if it loads appropriately.

Estivation

Answer 2

May it help someone, I had this issue because I had changed the names of the properties of the response object received from the api from its default case (snake_case) to camelCase while generating a typescript type for it.

Breeching

Answer 3

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'

Inhabited