Ionic 2 + Angular 2：图像前面带有'unsafe：'，因此即使它们很好也不显示

Question

出于某种原因，我的一些图片前面有'unsafe:'，这导致它们无法呈现。

问：为什么会发生这种情况？如何解决这个问题 - 这个Angular 2在白名单或Ionic 2中是否奇怪？

e.g。

<p><img src="unsafe:data:image/jpeg;base64,/9.....
<p><img src="data:image/jpeg;base64,/9.....

图像没有问题（见此处），请参阅plunkr here

第二张图片是从Ionic 2渲染的，第一张是我手动删除前缀以显示它没问题。

Answer 1

对于遇到此问题的任何人，我使用以下内容“解决”了它：

<强>类别：

import {DomSanitizationService} from '@angular/platform-browser';

constructor(private _DomSanitizationService: DomSanitizationService) {}

<强>模板：

<img [src]="_DomSanitizationService.bypassSecurityTrustUrl(imgSrcProperty)"/>

其中imgSrcProperty是违规图像base64编码。

我仍然认为这是一个错误！

Answer 2

以角度5.2.6

<强>类：

import { DomSanitizer } from '@angular/platform-browser';
constructor(public _DomSanitizationService: DomSanitizer ) {}

<强>模板

<img [src]="_DomSanitizationService.bypassSecurityTrustUrl(imgSrcProperty)"/>

Answer 3

我想添加一个额外的答案，所以你们中的一些人将不需要调试很长时间。

我们也在iOS（WKWebView）上与Ionic + Angular一起遇到了这个问题，并且发现Base64数据网址也被认为是＆＃34;不安全＆＃34;一旦Base64字符串包含换行符。 MS Windows样式CRLF或LF。

我们继续从base64字符串中删除那些有问题的字符（外部接口是＆＃34;非常打印＆＃34;它们），最终为我们解决了这个问题。

在应用@Dave提到的旁路之前，我会检查字符串。

Answer 4

就我而言，我发现我的头撞在墙上几次后，图像网址末尾的一小撮空白和无害的空格会使Ionic / Angular发出此错误。

Answer 5

它对我有用，尽管在 Angular 11 中略有不同。 DomSanitationService 现在是 DomSanitizer：

import {DomSanitizer } from '@angular/platform-browser';

如果你想在你的组件 html 中使用它，你需要将它设置为 public：

constructor(public domSrv: DomSanitizer)

然后它易于使用：

<img *ngIf="picture" [src]="domSrv.bypassSecurityTrustUrl(picture)" />