Javascript NextJS加载外部图像Amazon
amazon上有一个特定的url,它在s3上存储了一些图像,相关的amazon域已经在next.config.js的域上配置好了,但没有在前面加载。如果我放置任何外部url,unsplah或其他,它将正常加载 有问题的url是:idiHeiro-admin-images.s3.sa-east-1.amazonaws.com 控制台上发生的错误在404(错误请求)的url中 --错误控制台--Javascript NextJS加载外部图像Amazon,javascript,reactjs,performance,next.js,image-optimization,Javascript,Reactjs,Performance,Next.js,Image Optimization,amazon上有一个特定的url,它在s3上存储了一些图像,相关的amazon域已经在next.config.js的域上配置好了,但没有在前面加载。如果我放置任何外部url,unsplah或其他,它将正常加载 有问题的url是:idiHeiro-admin-images.s3.sa-east-1.amazonaws.com 控制台上发生的错误在404(错误请求)的url中 --错误控制台-- GET http://localhost:3000/_next/image?url=https%3A%2
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)
(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}
/>
--next.config.js--
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)
(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}
/>
--使用组件--
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)
(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}
/>
所以我搜索了AmazonS3请求,似乎在发送请求时还需要配置一些东西。请参阅s3铲斗的响应代码: 有关使用s3 bucket设置Nextjs网站的信息,请参见本博客: 博客中突出的一点是:“我们需要做的另一件事是在“权限”选项卡下启用公共访问。您也可以在上载文件时这样做。” 编辑:首先尝试启用公共访问(如果bucket可以是公共的),然后查看请求是否成功