NextJS Image组件路径不正确

Question

我正在开发一个NextJS应用程序，但是我在使用Image组件时遇到了问题。

使用相同的src属性路径，普通的img元素可以正常工作，而Image组件无法正常工作。

我的项目具有标准的public文件夹，在其中我有一个名为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

为什么组件不会加载？谢谢！

- Sethypie

---

也许你在某个地方打错了字或者多加了一个空格？如果它直接在公共文件夹中，那么这应该可以工作。 - Gh05d

我使用了一个新的 create-next-app 应用程序，使用相同的文件名进行了完全相同的操作，但没有复现您的问题。 - Roman Mkrtchian

我遇到了同样的问题，你有解决方案吗？ - Dylan

Answer 1

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

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

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

我的问题是当在公共文件夹中有很多图片时

- Otman Elkantaoui

Answer 2

给像我这样的Next.js新手的一个更新。 静态文件存放在根目录下的public文件夹中： nextjs文档

- Brandon So

---

目前你的回答写得不够清楚。请[编辑]以添加更多细节，帮助其他人理解这如何回答了提出的问题。你可以在帮助中心找到更多关于如何写出好答案的信息。 - undefined

Answer 3

使用loader属性。

<Image src={iconSrc} loader={() => item.iconSrc} alt="作者的图片" />

- Vadim Ryabov