我正在尝试使用next/image来渲染一个svg图像。然而，每当我尝试这样做时，我都会得到以下错误：
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
Check the render method of `ImagePage`ImagePage的源代码：
import React from 'react';
import Image from 'next/image';
import { Paper } from '@mui/material';
import Img from '../../images/image.svg';
const ImagePage = () => {
return (
<div>
<Paper>
<Image src={Img} />
</Paper>
</div>
);
};
export default ImagePage;如果我在div标签之间放置任何其他组件，我不会看到此错误。图像的路径是正确的。
是否有其他方法可以渲染图像，而不会引发此错误？
3条答案
按热度按时间v64noz0r1#
要完成Gan's answer，您需要提供与公用文件夹对应的路径。这是你唯一能放资产的文件夹此外，您可以使用正斜杠直接访问公用文件夹。因此，考虑到您的资产已经在images文件夹下的public目录中，请使用以下命令：
li9yvcax2#
我遇到的实际问题是，Image的导入是作为对象进入的。对象有一个名为default的键，这是实际的Image实现。为了访问图像，我必须更新标签：
导入之所以会出现这种情况，是因为我的package.json中有以下一行代码：
一旦我把它拿出来，我就可以访问图像：
to94eoyn3#
src属性接受Image组件中的字符串值。看来你的源代码没什么问题。但是，导入节表示的是对象而不是路径，这可能与对象名称或某些保留的组件名称冲突。因此，您需要提供SVG路径，而不是导入的对象。它应该是
PS：图像组件需要
alt，width和height。