How to lazy load base 64 image with angular?

Question

My products api returns products info which includes image name to download asynchronously.

{products: 
 [
  {name: 'test product 1', price: 'xxxx', image: 'product1.jpg' etc..}
  {name: 'test product 2', price: 'xxxx', image: 'product2.jpg' etc..}
 ]
}

I need to make a GET call with image name as query param which returns base 64 string of image.

GET api: https://mydomain/api/img?name=product1.jpg
response : 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/7QBGUGhvdG9zaG9wIDMuMAA4QklNBAQAAAAAACk...'

I want to show the product on page and then load the image asynchronously (lazy load).

<div *ngFor='let product of products | async'>
    <img [src]='getImage(product.image)' alt='loading...'/>
    <p>{{product.name}}<p>
    <span>{{product.price}}</span>
</div>

  getImage(name: string) {
    return this.appService
      .getImageData(name)
      .pipe(switchMap((res) => res))
      .subscribe(
        (res) => res, // This will return the base64 string
        (err) => err
      );
  }

Can anyone help to get the lazily loaded images with base64 string in Angular application?

Could you include the component that corresponds to your template? — derekbaker783, Jul 05 '20 at 11:49
https://medium.com/@tommybernaciak/image-optimization-lazy-loading-for-angular-using-lazysizes-1b8a1fb8e1f8 — Fateh Mohamed, Jul 05 '20 at 11:51
@derekbaker783 I have updated my post. Let me know if that helps. — Sandeep Behera, Jul 05 '20 at 13:54
Why does your API request return a Base64 encoded image instead of just returning the image purely? That would require less bandwidth and you could use all the regular caching mechanisms. — Joachim Sauer, Jul 05 '20 at 13:59
@JoachimSauer The reason is, images are not hosted any where. There are stored and fetched form mongo db in binary. — Sandeep Behera, Jul 05 '20 at 14:05
@SandeepBehera: so? You can just return them in binary. It doesn't matter if they are "really" stored in files or not. — Joachim Sauer, Jul 05 '20 at 14:11

How to lazy load base 64 image with angular?

0 Answers0