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}`);
}

没有解决这个问题。 DomSanitizer class 在 RC6

中不再存在

Answer 1

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

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

constructor(private sanitizer:DomSanitizer) {}

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

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

另见

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 在获取之前被清理了，这就是为什么我无法让它工作的原因。

Answer 3

在尝试使 bypassSecurityTrust... 功能正常工作失败后，我采取了以下措施：

@ViewChild('div_element_id') private div_element_id: ElementRef;
...

this.div_element_id.nativeElement.innerHTML = bypass_security_for_this_html;

Angular 2 禁用清理

Angular 2 disable sanitize

sanitization

typescript

angular2-template

angular