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

Question

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

目前，我的卡介质如下所示。我正在获取图像URLrow。image。URL并将其分配给图像CardMedia组件

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

但是我想利用Next JSImage组件的优化和延迟加载，但无法找到适合这个的方法。

import Image from 'next/image'

有人面对过这种需求吗?谢谢你的帮助

谢谢Venk

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>

查看答案获取更多信息

Answer 2

Objectfit现在已被弃用，您应该在Image组件中使用样式道具。

style={{objectFit: "cover"}}