Next Image 组件在生产中抛出 404 错误，在开发中工作正常

Question

我在隐藏图库中有一堆图像，仅当用户单击某个按钮时才显示。

在开发服务器上，一切都很好，没有错误或问题，但是当我部署网站并打开图库时，图像不显示并在控制台中抛出 404 错误（我包含了所需的道具）。

当我用

<Image/>

替换

<img>

组件时，开发服务器上和上线时一切都很好。有人可以帮忙吗？我查了很多，没有发现类似的问题。

Answer 1

我的解决方案：

我遇到了同样的问题，并通过重命名图像文件名解决了它。

问题是如何产生的：

我已重命名图像，仅将大写字母更改为小写字母。这导致文件在我的 github 存储库中被错误命名。使用新字符重命名后，文件已在 github 上正确更新。

Answer 2

在根目录上创建一个文件夹，将其称为“static”，基本上是 /static/imagename.png

像这样将源设置为图像；

<img src="/static/imagename.png" />

这应该在开发环境和构建文件中加载静态图像。

Answer 3

使用 Next.js 的默认加载器进行图像优化与

next export

不兼容。

可能的解决方案：

• 使用

  next start

  ，启动图像优化 API。
• 使用Vercel进行部署，支持图像优化。
• 在

  next.config.js

  中配置第三方加载器。

这意味着：

Only assets that are in the public directory at build time will be served by Next.js. Files added at runtime won't be available

解决这个问题。我只是使用 next-optimized-images 来表示静态图像，使用

next/image

来表示来自云端的图像。

请阅读本文以获取更多理解：https://dev.to/jameswallis/next-image-and-next-optimized-images-a-brief-comparison-4c4i

Answer 4

我已经用这个解决了这个错误，在

next.config.js

images: {
    unoptimized: true,
  },