Angular

Question

我正在从 REST 服务加载 arrayBuffer 图像，图像在显示时会降低应用程序的速度，有没有更好的方法来做到这一点？

HTML:

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

打字稿：

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

由于您在模板中使用方法，因此Angular将始终在每个更改检测周期中重新执行所有函数模板以进行比较。

尝试创建属性，然后将其绑定到 src 属性：

HTML:

<img [src]="imgSource"/>

打字稿：

imgSource;

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

Angular - ArrayBuffer Image 减慢应用程序

Angular - ArrayBuffer Image slow down the application

html

rest

arraybuffer

typescript