Angular - ArrayBuffer Image 减慢应用程序的速度答案

【问题标题】：Angular - ArrayBuffer Image slow down the applicationAngular - ArrayBuffer Image 减慢应用程序的速度
【发布时间】：2021-05-28 21:05:25
【问题描述】：

我正在从 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;
}

【问题讨论】：

不要将方法绑定到您的 [src] 属性。进行转换并仅绑定结果。

标签： html angular typescript rest arraybuffer

【解决方案1】：

当您在模板中使用方法时，Angular 将始终在每个更改检测周期中重新执行所有功能模板进行比较。

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

HTML：

<img [src]="imgSource"/>

打字稿：

imgSource;

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

【讨论】：