Saya ingin mengatur gambar latar belakang DIV di Template Komponen di aplikasi Angular 2 saya. Namun saya terus mendapatkan peringatan berikut di konsol saya dan saya tidak mendapatkan efek yang diinginkan ... Saya tidak yakin apakah gambar latar belakang CSS dinamis diblokir karena batasan keamanan di Angular2 atau jika template HTML saya rusak.
Ini adalah peringatan yang saya lihat di konsol saya (Saya telah mengubah url img saya menjadi /img/path/is/correct.png:
PERINGATAN: membersihkan url nilai gaya yang tidak aman (SafeValue harus menggunakan [property] = binding: /img/path/is/correct.png (lihat http://g.co/ng/security#xss )) (lihat http: // g.co/ng/security#xss ).
Masalahnya adalah saya membersihkan apa yang disuntikkan ke template saya menggunakan DomSanitizationServicein Angular2. Ini HTML saya yang saya miliki di template saya:
<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>Ini komponennya ...
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;
}
}
}
}
}Harap diperhatikan bahwa ketika saya baru saja terikat ke template menggunakan [src] = "image", misalnya:
<div *ngIf="image">
<img [src]="image">
</div>dan imagedisahkan menggunakan bypassSecurityTrustUrlsemuanya tampaknya bekerja dengan baik ... adakah yang bisa melihat apa yang saya lakukan salah?