2

ngFor ループ内に背景画像を追加しようとしています

警告を受けた後

WARNING: sanitizing unsafe style value url…

DomSanitizer の使用を調べましたが、スタイルが添付されていないか、動作するのにまだ問題があります。

SafeValue must use [property]=binding

これは、url変数を宣言する方法です

res.map(items=>{

let url = "https://img.youtube.com/vi/"+ items.vidUrl + "/0.jpg";

items.vidUrl =  this.sanitizer.bypassSecurityTrustStyle("'background-image': 'url("+url+")'")
         });

this.blogs = res;

ログに記録すると、items.vidUrl が正しく更新されていることが示されます

そしてHTML

<div class="col-4 card" *ngFor="let blog of blogs">
<div class="bg-cover"  [ngStyle]="blog?.vidUrl" ></div>
</div>
4

1 に答える 1

1

変更することで動作するようになりました

items.vidUrl =  this.sanitizer.bypassSecurityTrustStyle("'background-image': 'url("+url+")'")
         });

に

items.vidUrl =  this.sanitizer.bypassSecurityTrustStyle("url("+url+")")
         });

そしてHTMLで

<div class="bg-cover"  [style.background-image]="blog?.vidUrl" ></div>
于 2017-09-02T12:53:42.143 に答える