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

【问题标题】：Next Image component throws 404 error in production, works fine in development下一个 Image 组件在生产中抛出 404 错误，在开发中工作正常
【发布时间】：2021-03-17 05:23:46
【问题描述】：

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

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

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

【问题讨论】：

标签： next.js nextjs-image

【解决方案1】：

使用 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 用于来自云端的图像。

【讨论】：