angular - Angular：如何在 innerHTML 中加载安全图像

Question

innerHtml在元素内加载安全图像（可通过授权标头访问的图像）的最佳方式是什么。

我知道，可以使用如下管道加载受保护的图像：

<img [src]="'http://secured/image/url' | authImage | async"/>
# or
<img src="{{ 'http://secured/image/url' | authImage | async}}"/>

export class AuthImagePipe implements PipeTransform {

  constructor(private http: HttpClient) {
  }

  async transform(src: string): Promise<string> {
    const headers = new HttpHeaders({'Authorization': `Bearer token`});
    try {
      const imageBlob = await this.http.get(src, {headers, responseType: 'blob'}).toPromise();
      const reader = new FileReader();
      return new Promise((resolve, reject) => {
        reader.onloadend = () => resolve(reader.result as string);
        reader.readAsDataURL(imageBlob);
      });
    } catch {
      return 'fallback.png';
    }
  }

}

但是，不知道如何将此逻辑应用于 innerHtml 内容中的所有图像。请注意，innerHtml 的内容是动态的，可能会根据用户输入而改变。

标签： angulartypescript