NextJS load external image Amazon

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

So I searched for amazon s3 request and it seems you need to configure a few more things when sending the request. See the response codes for s3 bucket: https://docs.aws.amazon.com/AmazonS3/latest/API/ErrorResponses.html

And see this blog for info on setting up Nextjs website with s3 bucket: https://medium.com/bb-tutorials-and-thoughts/how-to-build-a-next-js-static-website-with-aws-s3-643ff55261ac

One thing that stood out from the blog: “One more thing we need to do is enable public access under the permissions tab. You can do this while uploading files as well.”

Edit: Try enable public access first (if the bucket can be public) and see if the request is successful then.