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

Question

出于某种原因，我的一些图像被添加到'unsafe:'前面，导致它们不被渲染。

问）为什么会发生这种情况？如何解决这个问题 - 这个Angular 2是白色的还是Ionic 2的奇怪？

EG

<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字符串包含换行符，Base64数据URL也被认为是“不安全的”。 MS Windows样式CRLF或LF。

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

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