清理 base64 图像提供 changingThisBreaksApplicationSecurity

Sanitizing base64 image gives changingThisBreaksApplicationSecurity

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

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

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

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

DEMO

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

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

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

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

(注意开头的unsafe)

而且我看到了使用建议

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

但这感觉不对。

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

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

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

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