Angular 2アプリのコンポーネントテンプレートでDIVの背景画像を設定したいと思います。しかし、コンソールに次の警告が表示され続け、目的の効果が得られません... Angular2のセキュリティ制限のために動的CSS背景画像がブロックされているのか、HTMLテンプレートが壊れているのかわかりません。
これはコンソールに表示される警告です（img urlを/img/path/is/correct.png次のように変更しました：
警告：安全でないスタイル値のURLをサニタイズします（SafeValueは[property] = binding：/img/path/is/correct.pngを使用する必要があります（http://g.co/ng/security#xssを参照））（http：//を参照）g.co/ng/security#xss）。
問題はDomSanitizationService、Angular2 を使用してテンプレートに注入されたものをサニタイズすることです。テンプレートにあるHTMLは次のとおりです。
<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>
これがコンポーネントです...
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;
}
}
}
}
}
たとえば、[src] = "image"を使用してテンプレートにバインドしただけであることに注意してください。
<div *ngIf="image">
<img [src]="image">
</div>
そしてimage使用して渡されたbypassSecurityTrustUrlすべてのものをうまく動作するように見えた...缶誰も私が間違ってやっているものを参照してください？
あなたはあなたの質問に対する解決策を得ましたか？私はまったく同じ問題を抱えていますが、解決策を見つけようとしています。前もって感謝します！
—
SK。