angular dom 消毒剂和 svg 字节数组

Question

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

None 他们工作了:(

Answer 1

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

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

然后能够安全地渲染 html:

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

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

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

angular dom 消毒剂和 svg 字节数组

angular dom sanitizer and svg byte array

angular

svg

angular-dom-sanitizer