5

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:

package.json configuration

Bad request

Here is my Snippet from my Image Code:

Snippet NextJS/Image Code

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

juliomalves
  • 42,130
  • 20
  • 150
  • 146
Ibo
  • 159
  • 1
  • 7
  • Please make sure to post code and errors as text directly to the question (and [not as images](https://meta.stackoverflow.com/questions/285551)), and [format them appropriately](https://stackoverflow.com/help/formatting). – juliomalves Apr 10 '22 at 17:10

3 Answers3

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.

Abhishek Prajapati
  • 76
  • 5
0

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'

Chukwuemeka Maduekwe
  • 6,687
  • 5
  • 44
  • 67
0

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.

Debarghya Chakraborty
  • 65
  • 1
  • 1
  • 9