javascript - Next.js 图像不取消图像加载已删除

Question

我正在为博客文章创建客户端搜索，并将结果显示在带有图像的卡片中。我认为一个非常简单的用例。我正在使用 Next.js 及其图像组件来加载图像。

我正在对结果进行实时输入过滤器，以便在您输入结果卡时更改。我遇到的一个问题是，当您键入并替换卡片以及新图像时，浏览器仍在加载最后一张图像并导致加载图像的积压。

我想知道是否有办法取消刚刚删除的图像的请求。另一种方法是对过滤进行去抖动，但我希望尽可能提高性能。

这是我的一些代码。

搜索卡

import Image from 'next/image';
import styles from './SearchCard.module.scss';

export default function SearchCard({ data, onClick }: any) {
    return (
        <a className={styles.searchCard} onClick={onClick}>
            <Image
                src={data.image}
                width={289}
                height={152}
                alt=""
                placeholder="blur"
                blurDataURL={data.placeholderImage}
            />

            <h3>{data.title}</h3>
            <p>{data.description}</p>
        </a>
    );
}

实时过滤

const searchInitiatives = (value: string) => {
   const results = initiativesDb.search(value);
   const foundInitiatives = results.map((el: any) => el.item);
   value ? setInitiatives(foundInitiatives) : setInitiatives(defaultInitiatives);
};

搜索结果

initiatives
    .filter((_, i) => i < INITIATIVES_MAX)
    .map((el, i) => (
         <SearchCard key={el.guid} onClick={handleSelect} data={el} />
    ))}

图像加载积压

这发生在您的类型和结果根据您的查询更新/过滤时。此示例中的这些图像很小，但确实会影响最新的图像加载时间。特别是当您模拟慢速连接时。