有沒有辦法在材質 ui 的 CardMedia 組件中延遲加載圖像？

Question

我正在嘗試延遲加載 CardMedia 組件中的圖像。 是否有我可以使用的屬性或任何其他方式將圖像的延遲加載合並到組件中。

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

Answer 1

幸運的是，是的。 一旦你添加了component="img"屬性，你就可以在組件中訪問loading屬性。 將其設置為loading='lazy' ，您就可以使用 go。

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