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

Question

出于某种原因,我的一些图像被预先添加'unsafe:',这导致它们不被渲染.

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

例如

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

图像没有问题(见这里),请参见此处的plunkr

第二个图像是从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)"/>

你的 imgSrcProperty 是什么？我正在使用您的解决方案，如下所示，它有效： `<img [src]="_DomSanitizationService.bypassSecurityTrustUrl('data:image/png;base64, ' + base64string)" />` (2认同)

Answer 3

我想补充一个额外的答案,所以你们中的一些人不必多年来调试.

我们还在iOS(WKWebView)上与Ionic + Angular一起遇到了这个问题,并且发现,一旦Base64字符串包含换行符,Base64数据URL也被认为是"不安全的".MS Windows样式CRLF或LF.

我们继续从base64字符串中删除那些有问题的字符(外部接口"非常打印"它们),这最终解决了我们的问题.

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

这解决了我的问题.我将此添加到我的JS代码中以删除换行符并且错误消失:```mytext = mytext.replace(/(\ r \n\t | \n |\r\t\t)/ gm,"") ;``` (4认同)