angular - 动态添加外部背景图像Angular 2 sanitizer

Question

我正在尝试在 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>

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>