NextJS/Image: "url" parameter is valid but upstream response is invalid - next.js

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'

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.