我正在开发 NextJS 应用程序,但无法让 Image 组件正常工作。
正常的 img 元素使用与 Image 组件相同的 src 属性路径可以正常工作。
我的项目有标准的公用文件夹,里面有一个名为 nageldog.png 的图像
import Image from "next/image";
...
<img src="/nageldog.png" alt="a"/>
<Image src="/nageldog.png" alt="b" width="64" height="64" />
...
在浏览器控制台中
为元素生成的 src 路径<img>
看起来不错:
<img src="/nageldog.png" alt="a">
为组件生成的 src 路径<Image>
看起来很奇怪:
<img alt="b" src="/_next/image?url=%2Fnageldog.png&w=256&q=75"
我在控制台中收到错误:“加载资源失败...状态 500”http://localhost:3000/_next/image?url=%2Fnageldog.png&w=64&q=75
为什么 Image 组件不会加载?谢谢!