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

【问题标题】：How to use Next JS IMAGE inside material ui card media如何在材质ui卡媒体中使用Next JS IMAGE
【发布时间】：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'

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

谢谢文克

【问题讨论】：

标签： material-ui next.js nextjs-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了解更多信息

【讨论】：