Next.js 搜索本地目录中的图像而不是 AWS 上的图像

Question

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

Answer 1

我设法解决了这个问题：

改变：

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}
/>;

这应该可以解决问题！