gpt4 book ai didi

reactjs - Next.js 在本地目录中搜索不在 AWS 上的图像

转载 作者:行者123 更新时间:2023-12-04 13:54:00 26 4
gpt4 key购买 nike

我们正在将我们的应用程序从 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=100next.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:
enter image description here

最佳答案

我设法解决了这个问题:
改变:

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}
/>;
这应该可以解决问题!

关于reactjs - Next.js 在本地目录中搜索不在 AWS 上的图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66056135/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com