如何通過 Angular 中的異步 base64 字符串顯示圖像

Question

我使用來自 Angular 的 http 客戶端從后端加載 base64 字符串。 收到字符串后，圖像應立即顯示在視圖中。 我嘗試了下面的代碼，但是 Angular 響應了，因為由於 XSS 安全策略，無法將字符串加載到視圖中。

public image$: ReplaySubject<string>  = new ReplaySubject(1);

public loadImage(): void {
  ...
  this.deviceService.getItem(deviceId, itemId).then((response) => {
    this.image$.next(response.imageString);
  }
}

<img [src]="(image$ | async)" />

所以我嘗試使用 DomSanitizer 來信任字符串。 如果字符串是 static，這工作正常，但我無法為異步情況正確設置它。

public image: string = this.sanitizer.bypassSecurityTrustUrl("data:image/png;base64,...");

<img [src]="image" />

我也通過 DOM 或 ViewChild 嘗試了很多東西，但我找不到適合我用例的解決方案。 如何顯示通過異步調用獲得的 base64 字符串中的圖像？

Answer 1

我建議你幾個選擇：

使用自定義 pipe 將您的字符串轉換為 SafeResourceUrl

安全.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({
  name: 'safe'
})
export class SafePipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {}

  transform(url) {
    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }
}

html

<img [src]="image$ | async | safe" />

Ng-run 示例

手動將字符串轉換為 SafeResourceUrl

ts

image$: ReplaySubject<SafeResourceUrl> = new ReplaySubject(1);
...
this.image$.next(this.sanitizer.bypassSecurityTrustResourceUrl(response.imageString));

Ng-run 示例