Mise à jour dynamique de la luminosité css de l'image en Angular 2 ou 4

Question

J'essaie de mettre à jour dynamiquement la luminosité de l'image. Je reçois une erreur comme celle-ci dans la console

AVERTISSEMENT: désinfecter filtre de valeur de style dangereux: luminosité (%); (Voir http://g.co/ng/security#xss).

Voici mon code

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

plage est une variable

s'il vous plaît laissez-moi savoir, s'il y a des façons alternatives pour y parvenir.

Answer 1

Vous pouvez résoudre ce problème en sanitize comme suit:

Dans le composant

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

Pour ce faire, procédez comme suit.

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

Ici, la plage est votre variable ts.