在Angular 6中应用DomSanitizationService
在Angular 6中应用DomSanitizationService
提问于 2019-10-25 16:47:31
目前我不得不支持一个Angular项目。
不安全画面有安全问题报告，Chrome控制台下显示的错误信息如下：
unsafe:data:image/png;base64,:1 GET unsafe:data:image/png;base64, net::ERR_UNKNOWN_URL_SCHEME我用谷歌搜索了一下，发现我需要使用DomSanitizationService来清理这个值。然而，当我在它上面编写代码时，我一直有问题，我怀疑是语法错误。以下是我的HTML代码：
<img src="{{ _DomSanitizationService.bypassSecurityTrustUrl(captchaSrc) }}" height="auto" width="100%" id="captcha-img" />下面是我的TypeScript文件代码：
import { DomSanitizer } from '@angular/platform-browser';
captchaSrc: string = 'data:image/png;base64,';
constructor(
public _DomSanitizationService: DomSanitizer
) {
}
this.captchaSrc += this.captcha.captchaImg;我在chrome控制台中遇到以下错误：
unsafe:SafeValue must use [property]=binding: data:image/png;base64, (see http://g.co/ng/security net::ERR_UNKNOWN_URL_SCHEME你知道我犯了什么错误吗？
*编辑*提交Adrita Sharma answer后，我仍然有一些问题，那就是我通过传入方法，但它不生效：
startRegistration(via: string): void {
this.sharedService.generateCaptcha().subscribe(response => {
this.captcha = response;
this.captchaSrc += this.captcha.captchaImg;
this._DomSanitizationService.bypassSecurityTrustUrl(this.captchaSrc);
});
}回答 2
Stack Overflow用户
回答已采纳
发布于 2019-10-25 16:52:02
试着这样做：
constructor( public _DomSanitizationService: DomSanitizer) {
_DomSanitizationService.bypassSecurityTrustUrl(this.captchaSrc)
}模板：
<img [src]="captchaSrc" height="auto" width="100%" id="captcha-img" />编辑：
yourMethod(){
this.captchaSrc = this._DomSanitizationService.bypassSecurityTrustUrl('data:image/png;base64,' + this.captchaSrc)
}Stack Overflow用户
发布于 2019-10-25 17:11:32
尝试一下.ts
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
export class TESTComponent {
_imageUrlNotSanitized: SafeUrl;
image: string;
constructor(private sanitizer: DomSanitizer) {}
ngOnInit() {
this._imageUrlNotSanitized = this.sanitizer.bypassSecurityTrustUrl(this.image);
}
}.html <img [src]="_imageUrlNotSanitized">
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58555170
复制相关文章
相似问题
腾讯云开发者
