我在隐藏图库中有一堆图像,仅当用户单击某个按钮时才显示。
在开发服务器上,一切都很好,没有错误或问题,但是当我部署网站并打开图库时,图像不显示并在控制台中抛出 404 错误(我包含了所需的道具)。
当我用
<Image/>
替换 <img>
组件时,开发服务器上和上线时一切都很好。有人可以帮忙吗?我查了很多,没有发现类似的问题。
我遇到了同样的问题,并通过重命名图像文件名解决了它。
我已重命名图像,仅将大写字母更改为小写字母。这导致文件在我的 github 存储库中被错误命名。使用新字符重命名后,文件已在 github 上正确更新。
在根目录上创建一个文件夹,将其称为“static”,基本上是 /static/imagename.png
像这样将源设置为图像;
<img src="/static/imagename.png" />
这应该在开发环境和构建文件中加载静态图像。
使用 Next.js 的默认加载器进行图像优化与
next export
不兼容。
next start
,启动图像优化 API。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
我已经用这个解决了这个错误,在
next.config.js
images: {
unoptimized: true,
},