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

Question

我试图动态更新图像的亮度。在控制台中出现如下错误

警告：消毒不安全的样式值过滤器：brightness（％）; （见 http://g.co/ng/security#xss）。

这里我的代码

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

范围是一个变量

请让我知道，如果有任何替代方法来实现这一目标。

Answer 1

您可以通过sanitize方法如下解决这个问题：

在组件

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()"> 

Answer 2

您可以通过以下方式进行操作。

[style.filter]="'brightness('+ range +'%)'" 

这里范围是你的ts变量。