Ionic 2 + Angular 2:带有“不安全:"前缀的图像，因此即使它们很好也不会显示 [英] Ionic 2 + Angular 2: Images prepended with 'unsafe:' therefore not displaying even though they're fine

问题描述

由于某种原因，我的一些图像前面带有 'unsafe:'，这导致它们无法被渲染.

For some reason, some of my images are being prepended with 'unsafe:', which is causing them not to be rendered.

问)为什么会发生这种情况，我该如何解决 - 这个 Angular 2 是否与白名单或 Ionic 2 不一致?

例如

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

图像没有任何问题(请参见此处)，请参见 plunkr 此处

There is nothing wrong with the image (see here), see plunkr here

第二张图片是从 Ionic 2 渲染的，第一张我手动去掉了前缀以显示它很好.

The second image is rendered from Ionic 2, the first I manually removed the prefix to show it's fine.

推荐答案

对于遇到此问题的任何人，我已使用以下方法解决"了它:

For anyone experiencing this issue, I have 'solved' it by using the following:

类:

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

constructor(private _DomSanitizationService: DomSanitizationService) {}

模板:

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

其中 imgSrcProperty 是 base64 编码的违规图像.

Where imgSrcProperty is the offending image base64 encoded.

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

I still think this is a bug!

这篇关于Ionic 2 + Angular 2:带有“不安全:"前缀的图像，因此即使它们很好也不会显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！