Nextjs：无法从静态文件夹加载图像

Question

如何在 Next.js 的组件中加载图像？我必须先构建项目吗？如果是，有没有办法在不先构建的情况下加载图像？无论我尝试什么，我都无法让它发挥作用。

原文由 Vaggelis Stefanakis 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

来自文档：

Next.js 可以在根目录中名为 public 的文件夹下提供静态文件，如图像。然后，您的代码可以从基本 URL (/) 开始引用公共内部的文件。

所以， public/my-image.png 添加一张图片，然后就可以引用了：

 <img src="/my-image.png" />

我认为 next.js 将在此目录上进行监视，因此您无需在每次将内容放在那里时都重新 start 您的服务器。

原文由 Tomasz Mularczyk 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

静态目录已被弃用。将文件放在 public/static 目录中

原文由 Waitire Colline 发布，翻译遵循 CC BY-SA 4.0 许可协议