javascript - 使用延迟加载不会显示图像

Question

我有一个图片库，我打算在滚动时慢慢加载图片。

为此，我执行了一个发送图像路径的函数，然后我在 base64 中接收图像。

我试图在 stackblitz 中进行模拟，但我看不到图像，并且正在执行该函数。

图像没有出现的原因是什么，来自函数的返回？

有人能帮我吗？

使用的库：ng-lazyload-image

演示

HTML

<ul class="mdc-image-list my-image-list first">
    <li class="mdc-image-list__item" *ngFor="let image of Images; let i = index">
        <img [lazyLoad]="image.url">
        <div class="mdc-image-list-supporting"
            style="display: flex; align-items: center;flex-direction: column;padding: 2px">
            <span class="mdcImageListLabel">{{image.name}}</span>
        </div>
    </li>
</ul>

功能

export class LazyLoadImageHooks extends IntersectionObserverHooks {
  loadImage({ imagePath }: Attributes): Promise<any> {
    console.log(imagePath)
    return fetch(imagePath, {
      headers: {
        Authorization: 'Bearer ...',
      },
    })
      .then((res) => res.blob())
      .then((blob) => URL.createObjectURL(blob));
  }
}

问题 --> 图像不出现

我打算图像由函数返回，而不是直接从图像对象的 * ngfor 中返回。