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>