NextJS图像组件路径不正确

gudnpqoy 于 2022-12-23 发布在其他

关注(0)|答案(2)|浏览(218)

我正在开发一个NextJS应用程序，在使用Image组件时遇到了问题。
使用与Image组件相同的src属性路径时，常规img元素可以正常工作。
我的项目有一个标准的公共文件夹，其中有一个名为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&w=256&q=75"
我在控制台中收到错误：http://localhost:3000/_next/image?url=%2Fnageldog.png&w=64&q=75的“无法加载资源...状态500”
为什么不加载图像组件？谢谢！

next.js

来源：https://stackoverflow.com/questions/65952628/nextjs-image-component-incorrect-path

2条答案

按热度按时间

6vl6ewon1#

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

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

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

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

赞(0）回复(0）举报 2022-12-23

k4aesqcs2#

使用加载程序属性。
第一个月

赞(0）回复(0）举报 2022-12-23