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

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

您可以通过以下方式完成此操作。

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

这里的range是你的ts变量。

Answer 2

您可以通过如下方式清理来解决此问题：

在组件中

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

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

Dynamically updating css brightness of the image in Angular 2 or 4

angular2-forms

angular2-template

angular