NextJS load external image Amazon

Question

There is a specific url on amazon that stores some images on s3 that the amazon domain in question is already configured on the domain in next.config.js, but does not load on the front. If I put any external url, unsplah or other, it loads normally.

The url in question is: idinheiro-admin-images.s3.sa-east-1.amazonaws.com

And the error that occurs on the console is in the url with 404 (Bad Request)

-- Error console --

GET http://localhost:3000/_next/image?url=https%3A%2F%2Fidinheiro-admin-images.s3.sa-east-1.amazonaws.com%2Fcartao-de-credito%2Fol%25C3%25A9%2520consignado_1619718123784.png&w=64&q=75 400 (Bad Request)

-- next.config.js --

(module.exports = {
    images: {
      domains: [
        'images.unsplash.com',
        'idinheiro-admin-images.s3.sa-east-1.amazonaws.com'
      ]
    }
  })

-- usage component --

<Image
   src="https://idinheiro-admin-images.s3.sa-east-1.amazonaws.com/cartao-de-credito/ol%C3%A9%20consignado_1619718123784.png"
   alt={partnerCard.alt}
   width={100}
   height={63}
/>

Answer 1

In next.config.js make sure the domain URL is correct. The best way is to open a tab with your s3 URL and copy and paste everything before '.com'

For example:

module.exports = {
  images: {
    domains: ['example.s3.us-west-2.amazonaws.com'],
  }
}

and for Images:

<Image
  src={
  'https://example.s3.us-west-2.amazonaws.com/playstation.jpg'
  }
  width={170}
  height={100}
/>

Remember width and height is required unless you are directly importing images to your react code.