将新的Next.js图像组件与材质UI一起使用

Question

在Material UI中，显示图像的组件有一个图像参数。例如：

<Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />

在Next.js v10中，有一个新的Image组件可以自动缩放图像：https://nextjs.org/docs/api-reference/next/image

有人知道如何在Material UI中使用新的Image组件吗？

Answer 1

我可以这样使用它，而且效果很好。我希望它会有所帮助。

<Avatar className={className}>
<Image src={src || placeholder} alt={alt} layout="fill" />
</Avatar>

Answer 2

从"static/images/avatar/1.jpg"//定位图像

然后只需更换

src="/static/images/avatar/1.jpg"；

至

src={image_1.src}