reactjs - NextJS 图片组件路径错误

Question

我正在开发 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" />
...

在浏览器控制台中

---

为 <img> 生成的 src 路径元素看起来不错:

<img src="/nageldog.png" alt="a">

---

为 <Image> 生成的 src 路径组件看起来很奇怪:

<img alt="b" src="/_next/image?url=%2Fnageldog.png&amp;w=256&amp;q=75"

---

我在控制台中收到错误:“无法加载资源...状态 500”http://localhost:3000/_next/image?url=%2Fnageldog.png&w=64&q=75

为什么 Image 组件无法加载？谢谢!

Answer 1

你可以像这样导入静态图片

import Image from 'next/image'
import mypic from '../nageldog.png'

const MyImage = (props) => {
  return (
    <Image src={mypic} alt="Picture of the author" />
  )

我遇到的问题是公用文件夹中有很多图像