I am trying to render base64 string into <img src='data:image/png;base64,${Here}'
.
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.
Here is my markup:
<img alt="RegularImage" src="data:image/png;base64,{{imgBase64}}">
And here is my component part:
imgBase64="SomeBase64StringFetchedSomehow";
But angular2 is showing in console next message - WARNING: sanitizing unsafe URL value
How to prevent NG2 from sanitizing my base64 string?
Update
get getImg() {
return this._sanitizer.sanitize(SecurityContext.URL,`data:image/png;base64,${this.img}`);
}
Doesn't solve this issue. DomSanitizer class does not exists anymore in RC6
After unsuccessfully trying to get the bypassSecurityTrust... functions to work, I resorted to the following:
You need to explicitly tell Angular2 that the string is trusted
https://angular.io/docs/ts/latest/api/platform-browser/index/DomSanitizer-class.html
See also In RC.1 some styles can't be added using binding syntax
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 isSanitizer
. So here is the usage:As you can see first argument of
sanitize
method isSecurityContext
instance, which basically is enum. So right nowSanitizer
is a factory which choose the implementation to use based onSecurityContext
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.