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 here

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

Answer 1

对于遇到此问题的任何人，我使用以下方法'solved'解决了这个问题：

Class:

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

constructor(private _DomSanitizationService: DomSanitizationService) {}

模板：

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

其中 imgSrcProperty 是有问题的图像 base64 编码。

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

Answer 2

我想添加一个额外的答案，这样你们中的一些人就不用再调试了。

我们也在 iOS (WKWebView) 上与 Ionic+Angular 一起遇到了这个问题，发现一旦 Base64 字符串包含行，Base64 数据 url 也被视为 "unsafe"休息。 MS Windows 样式 CRLF 或 LF。

我们继续从 base64 字符串中删除那些有问题的字符（外部接口是 "pretty printing" 它们），这最终为我们解决了问题。

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

Answer 3

在 angular 5.2.6

class:

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

模板

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

Answer 4

在我的例子中，我发现，在我的头撞墙几次之后，图像 url 末尾的一个小而无辜的空白可以使 Ionic/Angular 发出这个错误.

Answer 5

虽然在 Angular11 中略有不同，但它对我有用。 DomSanitationService 现在是 DomSanitizer：

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

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

constructor(public domSrv: DomSanitizer)

那就好用了：

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

Ionic 2 + Angular 2: Images prepended with 'unsafe:' therefore not displaying even though they're fine