Angular 2禁用清理

Question

我正在尝试将base64字符串渲染到<img src='data:image/png;base64,${Here}'.

但总是当我尝试渲染它时,ng2在渲染之前清理我的base64字符串,然后在DOM中显示它之前将一些内容添加到我的值中.我找到了解决方法(使用DomSanitizer),但它不适用于最新版本.

这是我的标记:

<img alt="RegularImage" src="data:image/png;base64,{{imgBase64}}">

这是我的组成部分:

imgBase64="SomeBase64StringFetchedSomehow";

但angular2显示在控制台的下一条消息中 - WARNING: sanitizing unsafe URL value

如何防止NG2清理我的base64字符串？

更新

get getImg() {
    return this._sanitizer.sanitize(SecurityContext.URL,`data:image/png;base64,${this.img}`);
}

不解决这个问题.在RC6中不再存在DomSanitizer类

Answer 1

您需要明确告诉Angular2该字符串是可信的

https://angular.io/docs/ts/latest/api/platform-b​​rowser/index/DomSanitizer-class.html

constructor(private sanitizer:DomSanitizer) {}

get imgBase64() {
  this.sanitizer.bypassSecurityTrustUrl('data:image/png;base64,$SomeBase64StringFetchedSomehow');
}

<img alt="RegularImage" [src]="imgBase64">

另请参见在RC.1中,无法使用绑定语法添加某些样式

Answer 2

经过几个小时的研究，我终于发现在最新版本的 ng2 中没有DomSanitizer可以使用 DI 注入的东西，但是有Sanitizer. 所以这是用法：

constructor( private _sanitizer: Sanitizer){
}

get getImg() {
    return this._sanitizer.sanitize(SecurityContext.URL, `data:image/png;base64,${this.img}`);
}

<input src="{{getImg}}"/>

正如您所看到的，sanitize方法的第一个参数是SecurityContext实例，它基本上是枚举。所以现在Sanitizer是一个工厂根据以下条件选择要使用的实现SecurityContext

就我而言，我遇到了一个问题，即我的 Base64 在该获取之前已被清理，这就是为什么我无法使其正常工作的原因。