如何在材质ui卡媒体中使用Next JS IMAGE

Posted 2023-03-06

【中文标题】如何在材质ui卡媒体中使用Next JS IMAGE

【英文标题】：How to use Next JS IMAGE inside material ui card media

【发布时间】：2021-10-13 16:54:03

【问题描述】：

我在我的项目中同时使用 Next JS 和 Material UI。对于图像优化，我想使用 Next JS Image 组件。

目前，我的卡片媒体如下所示。我从 API 调用中获取图像 URL row.image.url 并将其分配给 CardMedia 组件的 image 道具

 <CardMedia
 className=classes.cardMedia
 image=row.image.url/>

但我想利用 Next JS Image 组件进行优化和延迟加载，但无法找到适合此的方法。

import Image from 'next/image'

有人遇到过这种要求吗？ 感谢您的帮助

谢谢 文克

【参考方案1】：

你可以这样做：

        <CardMedia className=classes.cardMedia title="Your title">
          <div style= position: 'relative', width: '100%', height: '100%' >
            <Image src=row.image.url layout="fill" objectFit="cover" />
          </div>
        </CardMedia>

查看this answer了解更多信息