Question

我试图在ngFor循环中添加背景图片

收到警告后

WARNING: sanitizing unsafe style value url…

我研究过使用DomSanitizer，但是我仍然无法使用它，或者我看到没有附加样式或

SafeValue must use [property]=binding

这就是我宣布网址变量的方式

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>

Answer 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>

动态添加外部背景图像Angular 2清洁剂

1 个答案: