next.js - 下一个 Image 组件在生产中抛出 404 错误,在开发中工作正常
问题描述
我在隐藏的画廊中有一堆图像,仅在用户单击某个按钮时显示。
在开发服务器上,一切都很好,没有错误或问题,但是当我部署我的网站并打开图库时,图像不显示并在控制台中抛出 404 错误(我包含了所需的道具)。
当我用 替换<Image/>
组件时<img>
,开发服务器上的一切都很好并且可以正常运行。有人可以帮忙吗?我搜索了很多,我没有发现任何类似的问题。
解决方案
使用 Next.js 的默认加载器进行图像优化与next export
.
可能的解决方案:
- 使用
next start
,启动图像优化 API。 - 使用 Vercel 进行部署,支持 Image Optimization。
- 在
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
推荐阅读
- sql - SQL将不同的值放入1行
- cookies - 有谁知道如何使用 __RequestVerificationToken 向应用程序发送 API 调用?(错误:cookie 和表单域被交换)
- python - 传单地图中的多边形叠加
- amazon-s3 - S3 Boto3 Stubber 没有下载文件的映射?
- apache-kafka - 如何使用 Kafka Streams 将消息拆分为慢速和快速轨道
- html - 为什么使用VBA将数据从html表格写入excel表格时速度很慢?
- rabbitmq - Service Fabric 中的可靠并发队列
- php - 多张图片上传不起作用 Laravel
- qml - QML 语法是 LALR(1) 吗?
- python - 如何使用opencv python在两个变量中获取图像中两条单独线的RGB值