reactjs - Next.js 在本地目录中搜索图像,而不是在 AWS 上
问题描述
我们正在将我们的应用程序从 Create React App 转换为 Next.js。
Next.js 应该从 AWS 加载图像,但这不会发生。为什么?
几天前它工作了。你认为这是一些缓存问题还是什么?
你有什么想法吗?
在 Next.js 中,应用程序从这个本地 URL 加载图像:
http://localhost:3000/_next/image?url=https%3A%2F%2Fticket-t01.s3.eu-central-1.amazonaws.com%2Fob8h_0.cover.jpg&w=1200&q=100
next.config.js
:
const { nextI18NextRewrites } = require("next-i18next/rewrites");
const localeSubpaths = {
hu: "hu",
en: "en"
};
module.exports = {
rewrites: async () => nextI18NextRewrites(localeSubpaths),
publicRuntimeConfig: {
localeSubpaths
},
images: {
domains: ["ticket-t01.s3.eu-central-1.amazonaws.com"]
}
};
1 图片标签:
<Image
src={`https://ticket-t01.s3.eu-central-1.amazonaws.com/${props.imgId}_0.cover.jpg`}
className={styles.imageEventMain}
alt="main event"
layout="responsive"
width={1795}
height={1000}
quality={100}
/>;
在 React 中,AWS 或图像加载没有问题。
编辑
尝试访问图像时的 console.log:
解决方案
我设法解决了这个问题:
改变:
module.exports = {
rewrites: async () => nextI18NextRewrites(localeSubpaths),
publicRuntimeConfig: {
localeSubpaths
},
images: {
domains: ["ticket-t01.s3.eu-central-1.amazonaws.com"]
}
};
至:
module.exports = {
rewrites: async () => nextI18NextRewrites(localeSubpaths),
publicRuntimeConfig: {
localeSubpaths
},
images: {
loader: "imgix",
path: "https://ticket-t01.s3.eu-central-1.amazonaws.com/",
domains: ["ticket-t01.s3.eu-central-1.amazonaws.com"]
}
};
像这样更改您的图像组件:
<Image
src={`${props.imgId}_0.cover.jpg`}
className={styles.imageEventMain}
alt="main event"
layout="responsive"
width={1795}
height={1000}
quality={100}
/>;
这应该可以解决问题!
推荐阅读
- ios - 错误:PJSON[83131:8504330] [] nw_protocol_get_quic_image_block_invoke dlopen libquic 失败
- python - 如何将点分隔表指定为sql查询的参数
- c# - 如何从 .NET5 应用程序获取 Windows 中的主监视器窗口桌面区域?
- php - 我不能在 laravel 中返回一个存在的视图
- angular - 调用 Twitter REST API 时遇到错误
- c++ - pcl::VoxelGrid 如何获取每个体素网格中的点数?
- c# - 如何使用 IEnumerable、IEnumerator 制作自定义链接列表
- ios - 允许某些 HTTPS/SSL/TLS 证书错误,但在 iOS 中失败所有其他错误
- css - 如何使用 flexbox 将所有元素放入 React-Bootstrap 卡中?
- python - 如何在别处使用类方法中的变量