1

amazon 上有一个特定的 url，它在 s3 上存储了一些图像，相关的亚马逊域已经在 next.config.js 的域中配置，但没有在前面加载。如果我放置任何外部 url、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}
/>
4

2 回答 2

0

所以我搜索了 amazon s3 请求，看来您在发送请求时还需要配置一些东西。查看 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

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

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

于 2021-05-27T05:39:36.140 回答
0

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

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

于 2021-07-13T07:42:28.127 回答