NextJS 加载外部图像 Amazon

Question

亚马逊上有一个特定的 url，它在 s3 上存储一些图像，相关的亚马逊域已在 next.config.js 中的域上配置，但不会在前面加载。如果我输入任何外部网址、unsplah 或其他网址，它会正常加载。

有问题的网址是：idinheiro-admin-images.s3.sa-east-1.amazonaws.com

控制台上出现的错误是在带有 404 (Bad Request) 的 url 中

-- 错误控制台 --

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'
      ]
    }
  })

-- 使用组件 --

<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

所以我搜索了 amazon s3 request ，看来您在发送请求时还需要配置一些东西。请参阅 s3 存储桶的响应代码： https://docs.aws.amazon.com/AmazonS3/latest/API/ErrorResponses.html

请参阅此博客，了解有关使用 s3 存储桶设置 Nextjs 网站的信息： https://medium.com/bb-tutorials-and-thoughts/how-to-build-a-next-js-static-website-with-aws -s3-643ff55261ac

博客中突出的一件事是：“我们还需要做的一件事是在权限选项卡下启用公共访问。您也可以在上传文件时执行此操作。”

编辑：首先尝试启用公共访问（如果存储桶可以是公共的），然后查看请求是否成功。