有没有办法在材质 ui 的 CardMedia 组件中延迟加载图像？

Question

我正在尝试延迟加载 CardMedia 组件中的图像。是否有我可以使用的属性或任何其他方式将图像的延迟加载合并到组件中。

<CardMedia
    key={cardIndex}
    component="img"
    style={{objectFit: 'contain', height: props.height}}
    image={(cardItem)}
 />

Answer 1

幸运的是，是的。添加component="img"prop 后，您就可以访问loading组件中的 prop。将其设置为loading='lazy'即可。

    <CardMedia key={cardIndex} component="img" loading="lazy" image="{(cardItem)} />