在Angular 6中应用DomSanitizationService

Question

当前，我必须支持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

关于我犯什么错误的任何想法？

Answer 1

尝试这样：

constructor( public _DomSanitizationService: DomSanitizer) {
   _DomSanitizationService.bypassSecurityTrustUrl(this.captchaSrc)
}

模板：

<img [src]="captchaSrc" height="auto" width="100%" id="captcha-img" />

Answer 2

尝试一下.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">