清理 base64 图像提供 changingThisBreaksApplicationSecurity

Question

我正在尝试渲染已转换为 base64 的图像

data:image/vnd.microsoft.icon;base64,AAABAAIAICAAA.....

现在，无论我做什么，我总是得到

{
     changingThisBreaksApplicationSecurity: 'data:image/vnd.micr.....
}

因此，在我的搜索中，人们建议使用 bypassSecurityTrustUrl 或 bypassSecurityTrustResourceUrl，但两者都会产生相同的结果。我也看到有人建议

<img src="{{base64}}">

但这和<img [src]="....">没什么区别，它产生

<img src="unsafe:data:image/vnd.microsoft.icon;base64,AAABA....">

(注意开头的unsafe)

而且我看到了使用建议

<img [src]="safeUrl.changingThisBreaksApplicationSecurity">

但这感觉不对。

关于如何正确呈现此 base64 图像的任何建议？

Answer 1

我打开了你的演示，有几件事让我眼前一亮

你的 base 64 是双引号：'"..."' 所以你应该删除 " 或 '。
你看到 { changingThisBreaksApplicationSecurity: ... } 因为你有 console.log(this.url)
您的 dom 应如下所示：<img [src]="url" />

进行所有 3 项更改后图像会正确显示，并且 errors/etc 中没有任何内容...：https://stackblitz.com/edit/angular-ivy-uxhrr2?file=src%2Fapp%2Fapp.component.ts

Sanitizing base64 image gives changingThisBreaksApplicationSecurity