是否有任何方法导入图像到我的materialui-nextjs项目

Question

我导入的图像如下:

import img from '../public/buildingspattern.png'

然后在组件中使用:

<Card className={classes.root}>
<CardMedia
className={classes.media}
image={img}
title="Buildings"
/>
<CardContent>
<Typography gutterBottom variant="h5" component="div">
Something
</Typography>
</CardContent>
</Card>

然后我固定了next.config.js

const webpack = require('webpack');
module.exports = {
i18n: {
locales: ["en", "fr"],
defaultLocale: "en",
},
webpack: (config, options) => {
config.module.rules.push({
test: /.(png|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader',
},
],
})
return config
},
};

我想我遗漏了一些东西应用程序启动正常，但是没有图像。

这就是我在Iyarn dev

之后看到的内容

<div class="MuiCardMedia-root 
makeStyles-media-16" 
style="background- 
image:url("8a955c62dc9b08f560cb800b273932ac.png")" 
title="Buidings">
</div>

Answer 1

我遇到了另一种方式，因为我刚刚实现它今天。这更简单，更有效，

• 进入MaterialUi
中的Card组件
• 将<img/>标签替换为<Image />标签
• 还请添加import Image from 'next/image'

Answer 2

假设您创建了一个用于返回Image的组件

import Image from 'next/image';

function ImageComponent() {
return (
<Image src="../public/someImage.png" alt="Buildings Pattern"/>
);
};

在你的图像属性中使用这个组件，就像你在上面所做的那样

image={ImageComponent}

✌

Answer 3

首先，你可以像这样使用next.js中图像的绝对路径/image-name，如果不行，你将在公共目录中创建一个名为static的目录，并将你的图像放在静态目录中，然后你可以访问/static/image name