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

标签 reactjs amazon-web-services next.js nextjs-image

我们正在将我们的应用程序从 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/

相关文章:

reactjs - Autosizer 制作高度和宽度为 0 的 div

reactjs - 在 Next.js 中使用 WebSocket

amazon-web-services - AWS - 使用 Route53、ACM、Cloudfront 为 www 和非 www 端点提供 https 端点

reactjs - 下一个JS : data fetching in child component and pass to parent component

reactjs - 当数据加载到 useState 中时,我的组件在页面加载后动画

reactjs - 使用 Rollup.JS 和 Formik 的外部库不尊重命名导出

java - 如何围绕 setter 创建通用方法?

amazon-web-services - 如何根据托管在亚马逊中的 EC2 实例获取 aws 帐号/id

markdown - 如何在 Next.js markdown 博客上进行语法高亮

next.js - Nextjs 页面在刷新时转到 404