Next.js 上的 Next/图像未显示

Question

我正在使用 next.js 11.1.0 ，我的图像没有显示（下图）。我尝试升级到 next.js 12 但问题仍然存在。我也尝试使用 img 标签，它工作正常，只是 next/image 不起作用。它似乎不适用于现场制作。我的图像存储在本地。有人遇到过这种情况吗？

                    <Image
                     src="images/Uploads/Activities/StoryTelling/3_2022-05-07203A383A38.jpeg"
                      width={500}
                      height={500}
                    />

Answer 1

正如韦伯的第二条评论所暗示的那样，文档指出所有静态文件（例如图像）都必须从public目录提供。

本教程中还提到了Next.js。

虽然您可能还没有试图弄清楚这一点，但其他人可能会从这种清晰度中受益。

您可以将图像放置在images公共目录内的某个目录中，所需的路径只是/images/sample.jpg.

Answer 2

如果一切在本地运行良好但在生产中运行不佳，则可能是图像加载器问题。我邀请您查看文档，因为您可能需要自定义函数来解析 URL。

图片加载器

内置装载机

我在 GCP 上部署时遇到了同样的问题，但在 Vercel 上一切正常。