Image 离子型2+；角度2：图像以'；不安全：'；因此，即使它们'；你很好

出于某种原因，我的一些图像在前面加了

“不安全：”

，这导致它们无法渲染

Q）为什么会发生这种情况，我如何解决它-这个角度2与白名单或离子2是奇数？

e、 g

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

第二幅图像是从Ionic 2中渲染出来的，第一幅我手动删除了前缀，以显示它很好。
对于遇到此问题的任何人，我已使用以下方法“解决”了它：

类别：

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

constructor(private _DomSanitizationService: DomSanitizationService) {}

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

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

模板：

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

constructor(private _DomSanitizationService: DomSanitizationService) {}

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

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



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

我仍然认为这是一个错误
 我想添加一个额外的答案，这样你们中的一些人就不用调试很久了

我们还与iOS上的Ionic+Angular（WKWebView）一起遇到了这个问题，并发现一旦Base64字符串包含换行符，Base64数据URL也被认为是“不安全的”。MS Windows样式的CRLF或LF

我们继续从base64字符串中删除这些有问题的字符（外部接口“漂亮地打印”它们），这最终为我们解决了这个问题

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

类别：

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

constructor(private _DomSanitizationService: DomSanitizationService) {}

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

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

模板

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


在我的例子中，我发现，在我的头撞了几次墙之后，图像url末尾的一个小而无辜的空格会使Ionic/Angular出现这个错误。
它对我有效，尽管在Angular 11中略有不同。
DomSanitationService现在是DomSanitationizer：

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

如果您想在组件html中使用它，则需要将其设置为公共：

constructor(public domSrv: DomSanitizer)

然后，它很容易使用：

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


当直接添加到
index.html时，没有Angular2或ionic也是一样的
没有引导Angular和ionic Hi，是的，我知道，我解释了我问题中发生的事情。那只不过是上下文而已。我想你还没有完全理解我。当然，如果你把它们都去掉，页面是一样的，但我要说的是，当使用Angular 2+Ionic 2时，它输出带有该前缀的imageBase64。所以他们牵涉其中。对不起，我想我现在明白了。我想如果它清理静态模板内容，那就是一个bug。我认为它应该只清理绑定值（虽然我不是安全专家）。自从被重命名为
DomSanitizer
，我在Angular 2.1.0中遇到了这个问题。需要注意的是，这绕过了整个内容安全策略（CSP），它可以/或通过
标记设置。@Dave好主意，但在离子-2中需要几秒钟。您能为同样的问题建议另一种解决方案吗@戴夫，不是为我工作。按照以上步骤，添加
&代替my
base64图像中的
和
。由于此原因，获取
net:：ERR_INVALID_URL
Dunno-肮脏黑客警报：将结果传递到函数中，并执行全部替换&；与&？比如str=str.replace（/&；/g，&'）也许？这解决了我的问题。我将其添加到JS代码中以删除换行符，错误消失了：
mytext=mytext.replace（/（\r\n\t| \r\t）/gm，”与mime类型
image/.png
中忘记的
相同的错误。这里有“data:image/${path.extension（imageFile.path）}…”如果你想编译成AOT，服务应该是公共的而不是私有的。@ChrisHaines AOT在你构建--prod时默认是打开的。你的意思是什么，这与这个问题有什么关系？谢谢。这很重要，因为AOT编译器不允许您从模板访问私有服务。您的imgSrcProperty是什么？我像这样使用您的解决方案，它是有效的：