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

Posted 2023-03-06

【中文标题】Next.js 在本地目录中搜索图像，而不是在 AWS 上

【英文标题】：Next.js searches images in local directory not on AWS

【发布时间】：2021-05-09 08:58:16

【问题描述】：

我们正在将我们的应用从 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
  
  layout="responsive"
  width=1795
  height=1000
  quality=100
/>;

在 React 中，AWS 或图像加载没有问题。

编辑

尝试访问图像时的console.log：

【问题讨论】：

当图像尝试加载到您的应用程序时，您是否遇到任何错误？可以直接从浏览器访问图片吗？

我将控制台的图片上传到问题中。我在同一个 Url 访问 Create React App 中的这些图像，我必须将其转换为 Next.js。我认为主要问题是 Next 想从 localhost 加载图像，但它们在 AWS 上

图片是从 localhost 提供的，因为由于您使用的是next/image，Next.js 将使用其内置的图像优化来优化图像并提供它。

没关系，我现在明白了，但是在那种情况下，为什么图像在 localhost 上不可用，在 next.js 缓存它们的路径上？

@GyarmatiIstván 你最终解决了这个问题吗？面临同样的问题

【参考方案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
  
  layout="responsive"
  width=1795
  height=1000
  quality=100
/>;

这应该可以解决问题！