Images do not appear using lazyload

Question

I have an image gallery and I intend to load the images slowly as the scroll is made.

For that, I execute a function that sends the image path and in return I receive the image in base64.

I tried to simulate in the stackblitz, but the images do not appear to me, and the function is being executed.

What is the reason why the images don't appear, coming from the function's return?

Can someone help me?

Library used:ng-lazyload-image

DEMO

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>

Function

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));
  }
}

Problem --> Images do not appear

I intend that the images are returned by the function and not directly from the * ngfor of the Images object.