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?

Adnan Sharif · Accepted Answer · 2021-10-28 09:42:48Z

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>

edited Oct 28, 2021 at 9:42

answered Oct 28, 2021 at 3:29

Adnan Sharif

9877 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Kapil Soni Over a year ago

sir i have tried above code and now [object object] not showing but also image not render again.its showing---ng-reflect-src="data:image/png;base64,Qk1a9AAA" this check my updated fiddle where i have update the image

Kapil Soni Over a year ago

finally i have fixed above isue also after modified getItemImage function -this.sanitizer.bypassSecurityTrustResourceUrl('data:image/png;base64,'+data)

Adnan Sharif Over a year ago

@KapilSoni I have updated my answer also.

Kapil Soni Over a year ago

can you tell me how to show spinner on image tag if image not loaded from API i have used appLazyload directive but its not working on that case?

Collectives™ on Stack Overflow

base64 image showing Object-Object in src in angular?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related