Angular - Display byte array as image

Question

I have an api that returns a byte[], i want to display it as an image in my front application, so i used data url to display the image

this.cardBackgroundService.getImage(event.data.entitlementCertificateNumber, "C003").subscribe(data => {
  this.image = data;
  console.log(this.image);
});

<img src="data:image/png;base64,{{image}}"/>

the problem is when i display the response of the api in the console, it has this format and it doesn't display as an image

�PNG �Ou���j�000000000H��a��a````````��a��a��a```````��a��a��a````````��a��a��a```````��a��a````````�.r�����X��V��QS��\�ۂ���F�`�{lhXnJU��s��iiǯ�O1�;������

Answer 1

You can display like this, it worked with me.

Import import { DomSanitizer } from '@angular/platform-browser';

Add DomSanitizer to constructor(private sanitizer: DomSanitizer) { }

this.cardBackgroundService.getImage(event.data.entitlementCertificateNumber, "C003")
.subscribe(data => {

  let objectURL = 'data:image/png;base64,' + data;
  this.image = this.sanitizer.bypassSecurityTrustUrl(objectURL);
});

In HTML

<img [src]='image' />

Answer 2

You need to convert your image data to a dataURL:

const reader = new FileReader();
reader.onload = (e) => this.image = e.target.result;
reader.readAsDataURL(new Blob([data]));

And in your component:

<img [src]="image"/>

Make sure you set the responseType to be of type 'blob' in your getImage() http get request.