Angular - ArrayBuffer Image slow down the application

Question

I'm loading an arrayBuffer image from a REST service and the image slow down the application when displayed, is there any better way of doing this?

HTML:

<img (click)="previewPlaneringskarta()" class="planeringskarta" [src]="arrayBufferToBase64(planeringskarta)" onerror="this.onerror=null; this.src='/assets/img/notfound.png'"/>

TypeScript:

arrayBufferToBase64(buffer) {
    let binary = '';
    const bytes = new Uint8Array(buffer);
    const len = bytes.byteLength;
  
    for (let i = 0; i < len; i++) {
        binary += String.fromCharCode(bytes[i]);
    }
  
    const imageSrc = 'data:image/gif;base64,' + window.btoa(binary);
  
    this.planeringskartaSrc = this.sanitization.bypassSecurityTrustUrl(imageSrc);
  
    return this.planeringskartaSrc;
}

Answer 1

As you are using method in template, then Angular will always reexecute all functions template in every change detection cycle to compare.

Try to create property and then bind it to src attribute:

HTML:

<img [src]="imgSource"/>

TypeScript:

imgSource;

setImg() {
    this.imgSource= this.arrayBufferToBase64(buffer) {
}