您可以将loading属性添加到图像元素中以延迟加载图像。有关此属性的完整解释者指南可以在web.dev上找到。
在您的情况下，它可能看起来如下所示：

cards.map(card => (
  <img src={SportImages[card.image_ref]} loading="lazy" />
))

您还应该确保指定width和height属性，以便浏览器可以使用正确的尺寸将元素放置在页面上。

您可以使用这个名为react-lazy-load-image-component的库导入LazyLoadImage组件，然后使用它渲染图像

cards.map(card => (
     <LazyLoadImage src={SportImages[card.image_ref]} {...props}/>
  ))

您还可以在延迟加载图像时添加效果。您可以在这里查看库的文档https://www.npmjs.com/package/react-lazy-load-image-component

loading='lazy'属性不支持Safari

<img loading=lazy src="image.jpg" />

试试这个包：

npm i react-lazy-load-image-component

示例：

import React from 'react';

import { LazyLoadImage, trackWindowScroll } from 'react-lazy-load-image-component';

const Gallery = ({ images, scrollPosition }) => (
  <div>
    {images.map((image) =>
        <LazyLoadImage  scrollPosition={scrollPosition}
            width="100%"
            height="auto"
            src={image.url} />
    )}
  </div>
);
 
export default trackWindowScroll(Gallery);

截至2023年，所有主流浏览器都支持img标签（caniuse）上的loading="lazy"属性，这使得它成为实现图像延迟加载的最简单方法。
但是，由于bug in Firefox，为了使其在Firefox中工作，loading属性必须放在src属性之前。
所以，套用Jon Koops的答案，直到Firefox中的bug被解决，这是一个可以在Firefox，Chrome和Safari上工作的例子：

cards.map(card => (
  <img loading="lazy" src={SportImages[card.image_ref]} />
))

如果将loading="lazy"放在src属性之后，延迟加载在Chrome中有效，但在Firefox中无效。