如何在下一个js中导入和使用图像?

Question

我尝试使用以下行导入图像，但显示错误:

import Image1 from '../public/IconGBANTQualifiedLeads.png'

我得到的错误:

./public/IconGBANTQualifiedLeads.png
模块解析失败:意外字符' ` ` (1:0)
你可能需要一个合适的加载器来处理这个文件类型，目前没有配置加载器来处理这个文件。参见https://webpack.js.org/concepts#loaders
(此二进制文件省略了源代码)

Answer 1

NextJS有自己的Image组件，你可以使用

import Image1 from '../public/IconGBANTQualifiedLeads.png'
import Image from 'next/image'
const Component = () => {
return (
<Image src={Image1} width='300px' height='200px' alt='this is my image'/>
)
}

在他们的文档中阅读更多信息https://nextjs.org/docs/api-reference/next/image