如何解决NextJS加载外部图片亚马逊
amazon 上有一个特定的 url,在 s3 上存储了一些有问题的 amazon 域已经在 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}
/>
解决方法
所以我搜索了 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
从博客中脱颖而出的一件事:“我们还需要做的另一件事是在权限选项卡下启用公共访问。您也可以在上传文件时执行此操作。”
编辑:首先尝试启用公共访问(如果存储桶可以是公共的),然后查看请求是否成功。
,在 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 代码中。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。