Angular 2禁用消毒 [英] Angular 2 disable sanitize

问题描述

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

I am trying to render base64 string into <img src='data:image/png;base64,${Here}'.

但是总是在我尝试渲染它时，ng2在渲染它之前先对base64字符串进行消毒，然后在DOM中将其添加到我的值中. 我找到了解决方法(使用DomSanitizer)，但是在最新版本上不起作用.

But always when I try to render it, ng2 sanitizing my base64 string before rendering it adds something into my value before showing it in DOM. I have found workaround(using DomSanitizer) but it doesn't work on latest versions.

这是我的标记:

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

这是我的组成部分:

imgBase64="SomeBase64StringFetchedSomehow";

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

But angular2 is showing in console next message - WARNING: sanitizing unsafe URL value

如何防止NG2清理base64字符串?

How to prevent NG2 from sanitizing my base64 string?

更新

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

无法解决此问题. RC6中不再存在DomSanitizer类

Doesn't solve this issue. DomSanitizer class does not exists anymore in RC6

推荐答案

经过数小时的研究，我终于发现，在最新版本的ng2中，没有可以使用DI注入的DomSanitizer，但是有.用法如下:

After few hours of researches I have finally found that in latest version of ng2 there is no DomSanitizer that can be injected using DI, however there is Sanitizer. So here is the usage:

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

As you can see first argument of sanitize method is SecurityContext instance, which basically is enum. So right now Sanitizer is a factory which choose the implementation to use based on SecurityContext

在我的情况下，我有一个问题，那就是在获得base64之前要对base64进行消毒，这就是为什么我无法使其正常工作.

In my case I had a problem that my base64 was sanitized before that get, that why I was not able to get it working.

这篇关于Angular 2禁用消毒的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！