角度 dom 消毒剂和 svg 字节数组答案

【问题标题】：angular dom sanitizer and svg byte array角度 dom 消毒剂和 svg 字节数组
【发布时间】：2021-11-11 10:37:39
【问题描述】：

我正在尝试将字节数组绑定到角度的图像标签。我知道字节数组是正确的，因为我可以下载它并从我的 API 中查看它。

我创建了这样的图像：

<img [src]="src" />

然后在我的代码中，我像这样清理字节数组：

this.src = this.sanitizer.bypassSecurityTrustResourceUrl(`data:image/svg+xml,${this.location.qrCode}`);

在我的控制台中我可以看到：

但是图片没有显示。我做错了什么？

我尝试了其他一些方法：

const reader = new FileReader();
reader.onload = (e) => (this.src = this.sanitizer.bypassSecurityTrustResourceUrl(e.target.result.toString()));
reader.readAsDataURL(new Blob([this.location.qrCode]));

和

this.src = this.sanitizer.bypassSecurityTrustResourceUrl(`data:image/svg+xml;base64,${this.test}`);

和

this.src= btoa(this.location.qrCode);

和

    const reader = new FileReader();
    reader.onload = (e) => (this.src = e.target.result);
    reader.readAsDataURL(new Blob([this.location.qrCode]));

他们都没有工作:(

【问题讨论】：

这看起来像 base64 编码，但 URL 缺少 base64 关键字。

标签： angular svg angular-dom-sanitizer

【解决方案1】：

我做了一些研究，结果发现我的 API base 64 对字节数组进行了编码，这就是它不起作用的原因。我只是用这个解码它：

this.svgData = atob(this.location.qrCode);

然后能够安全地渲染 html：

this.svg = this.sanitizer.bypassSecurityTrustHtml(this.svgData);

我可以在我的模板中这样使用：

<div [innerHtml]="svg"></div>

【讨论】：