angular - 角度 dom 消毒剂和 svg 字节数组

Question

我正在尝试将字节数组绑定到角度的图像标签。我知道字节数组是正确的，因为我可以下载它并从我的 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]));

他们都没有工作:(

Answer 1

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

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

然后能够安全地呈现html：

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

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

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