使用带有 Material UI 的新 Next.js Image 组件

Posted 2023-03-06

【中文标题】使用带有 Material UI 的新 Next.js Image 组件

【英文标题】：Using the new Next.js Image component with Material UI

【发布时间】：2021-03-08 02:21:24

【问题描述】：

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

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

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

有人知道如何将新的 Image 组件与 Material UI 一起使用吗？

【参考方案1】：

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

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