将新的 Next.js Image 组件与 Material UI 结合使用

Question

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

\n

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

\n

Next.js v10 中有一个新的Image自动缩放图像的组件：\xc2\xa0https://nextjs.org/docs/api-reference/next/image\xc2\xa0

\n

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

\n

Answer 1

我能够像这样使用它并且效果很好。我希望这会有所帮助。

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