生产环境下 Next.js 的图片组件出现404错误，但在开发环境中运行正常。

Question

我有一堆图片在一个隐藏的画廊里，只有当用户点击某个按钮时才显示。

在开发服务器上，一切正常，没有错误或问题，但是当我部署我的网站并打开画廊时，图片不显示，并在控制台中抛出404错误（我包含了所需的属性）。

当我用<img>替换<Image/>组件时，在开发服务器和现场一切都正常。有人可以帮忙吗？我搜索了很多，但没有找到类似的问题。

- Cesar Richards

Answer 1

我的解决方案：

我曾经遇到同样的问题，并通过重命名图片文件名来解决它。

问题产生的原因：

我曾经将图像重命名，只是将大写字母改为小写字母。这导致在我的Github存储库中，文件名错误。经过一个新字符的重命名后，文件在Github上正确地得到了更新。

- Philip

Answer 2

在根目录下创建一个名为“static”的文件夹，其路径为/static/imagename.png。

将源设置为以下图像；

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

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

- Borna GB

Answer 3

使用Next.js默认的loader进行图像优化与next export不兼容。

可能的解决方案：

• 使用next start，启动Image Optimization API。
• 使用Vercel进行部署，支持Image Optimization。
• 在next.config.js中配置第三方loader。

这意味着：只有在构建时在public目录中的资产才能被Next.js提供。运行时添加的文件将不可用

为了解决这个问题，我只是使用next-optimized-images进行静态图像，并且对于来自云端的图像使用next/image。

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

- coolbeatz71