NextJS 加载亚马逊外部图片

Question

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

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

控制台上发生的错误在 url 和 404（错误请求）

--错误控制台--

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

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

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

Answer 2

在 next.config.js 中确保域 URL 正确。最好的方法是使用您的 s3 URL 打开一个选项卡，然后复制并粘贴“.com”

之前的所有内容

例如：

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

对于图像：

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

请记住宽度和高度是必需的，除非您直接将图像导入您的 React 代码。

NextJS 加载亚马逊外部图片

NextJS load external image Amazon

javascript

performance

image-optimization

reactjs

next.js