angular - 在 Angular 2 或 4 中动态更新图像的 css 亮度

Question

我正在尝试动态更新图像的亮度。我在控制台中收到这样的错误

WARNING: sanitizing unsafe style value filter:brightness(%); (see http://g.co/ng/security#xss).

这是我的代码

<img src="../assets/images/image.png" class="cover-img" alt="image" [style.filter]="'brightness('+ range +'%)'"> 

range is a variable

请让我知道，如果有任何其他方法可以实现此目标。

Answer 1

您可以通过如下方式清理来解决这个问题:

在组件中

import { DomSanitizer } from '@angular/platform-browser';

constructor(private _sanitizer: DomSanitizer){}

 getfilters() {
    return this._sanitizer.bypassSecurityTrustStyle('brightness('+ this.brightnessRange +'%)')
}

在 HTML 中

<img src="../assets/images/image.png" class="cover-img" alt="image" [style.filter]="getfilters()">