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

Question

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

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

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

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

import Image from 'next/image'

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

谢谢文克

Answer 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>

检查此答案以获取更多信息