清理 base64 图像提供 changingThisBreaksApplicationSecurity
Sanitizing base64 image gives changingThisBreaksApplicationSecurity
我正在尝试渲染已转换为 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 图像的任何建议?
我打开了你的演示,有几件事让我眼前一亮
- 你的 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
我正在尝试渲染已转换为 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 图像的任何建议?
我打开了你的演示,有几件事让我眼前一亮
- 你的 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