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}
/>

Eames

Answer 1

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.

Carbonaceous

Thing is that the files are privat and will never be public so this doesnt help.. – Elayneelazaro

Answer 2

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.

Xenocryst

Is there a way to use an asset prefix for only images? I have a ton of images already built into my site and I don't want to go back and rename all their srcs – Grunter