Je souhaite définir l'image d'arrière-plan d'une DIV dans un modèle de composant dans mon application Angular 2. Cependant, je continue à recevoir l'avertissement suivant dans ma console et je n'obtiens pas l'effet souhaité ... Je ne sais pas si l'image d'arrière-plan CSS dynamique est bloquée en raison de restrictions de sécurité dans Angular2 ou si mon modèle HTML est cassé.
C'est l'avertissement que je vois dans ma console (j'ai changé mon URL d'img en /img/path/is/correct.png:
AVERTISSEMENT: nettoyage de l'url de la valeur de style unsafe (SafeValue doit utiliser [property] = binding: /img/path/is/correct.png (voir http://g.co/ng/security#xss )) (voir http: // g.co/ng/security#xss ).
Le fait est que je désinfecte ce qui est injecté dans mon modèle en utilisant le DomSanitizationServicedans Angular2. Voici mon HTML que j'ai dans mon modèle:
<div>
<div>
<div class="header"
*ngIf="image"
[style.background-image]="'url(' + image + ')'">
</div>
<div class="zone">
<div>
<div>
<h1 [innerHTML]="header"></h1>
</div>
<div class="zone__content">
<p
*ngFor="let contentSegment of content"
[innerHTML]="contentSegment"></p>
</div>
</div>
</div>
</div>
</div>Voici le composant ...
Import {
DomSanitizationService,
SafeHtml,
SafeUrl,
SafeStyle
} from '@angular/platform-browser';
@Component({
selector: 'example',
templateUrl: 'src/content/example.component.html'
})
export class CardComponent implements OnChanges {
public header:SafeHtml;
public content:SafeHtml[];
public image:SafeStyle;
public isActive:boolean;
public isExtended:boolean;
constructor(private sanitization:DomSanitizationService) {
}
ngOnChanges():void {
map(this.element, this);
function map(element:Card, instance:CardComponent):void {
if (element) {
instance.header = instance.sanitization.bypassSecurityTrustHtml(element.header);
instance.content = _.map(instance.element.content, (input:string):SafeHtml => {
return instance.sanitization.bypassSecurityTrustHtml(input);
});
if (element.image) {
/* Here is the problem... I have also used bypassSecurityTrustUrl */
instance.image = instance.sanitization.bypassSecurityTrustStyle(element.image);
} else {
instance.image = null;
}
}
}
}
}Veuillez noter que lorsque je viens de me connecter au modèle en utilisant [src] = "image", par exemple:
<div *ngIf="image">
<img [src]="image">
</div>et a imageété adopté en utilisant bypassSecurityTrustUrltout semblait bien fonctionner ... quelqu'un peut-il voir ce que je fais mal?