base64 image showing Object-Object in src in angular?

Question

//Pipe code where we wil manage base64
import { HttpClient } from '@angular/common/http';
import { Pipe, PipeTransform } from '@angular/core';
import { ItemMaster } from '@cust-custap/core/http/item-master/item-master.service';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({
  name: 'getImageUrl',
})
export class GetImageUrlPipe implements PipeTransform {
  constructor(
      private httpClient: HttpClient,
      private itemMasterService :ItemMaster,
      public sanitizer:DomSanitizer ) {}

  transform(value: any, id: any): any {
      console.log(id);
      return this.itemMasterService.getItemImage(id).subscribe((data:any)=>{
        let img=this.sanitizer.bypassSecurityTrustResourceUrl('data:image/png;base64,'+data);
        return img;
    });
  }
}

<!-- HTML part-->
<div *ngFor="let product_catalog  of result; let i= index;"> 
  <img class="card-img img-fluid" width="75" height="75" alt=""
     [src]="'' | getImageUrl: product_catalog.ID">
     </div>

I want to show base64 image in html and i have used pipe for showing base64 image,also pipe is working correctly but image showing object-object in console,i have already used this.sanitizer.bypassSecurityTrustResourceUrl but its not working.please check below my code and let me what i am wrong here?

Answer 1

You're seeing [object object] because the pipe is returning a subscription, not the base64 string.

You need to use the AsyncPipe here.

Instead of returning a subscription, you can return an observable from your pipe's transform() method.

transform(value: any): Observable {
  return this.itemMasterService.getItemImage(value)
             .map(data => this.sanitizer.bypassSecurityTrustResourceUrl('data:image/png;base64,' + data));
}

And the HTML part could be like this

<div *ngFor="let product_catalog  of result; let i= index;"> 
  <img class="card-img img-fluid" width="75" height="75" alt=""
     [src]="product_catalog.ID | getImageUrl | async">
</div>