linux - 如何将背景图像添加到 Angular 中的 ？

Question

我正在创建一个组件，其背景作为其属性提供，如下所示:

<overlay-card src="https://static.pexels.com/photos/51387/mount-everest-himalayas-nuptse-lhotse-51387.jpeg" color="rgba-bluegrey-strong">

我的组件模板:

`<div class="card card-image mb-3" style="background-image: url({{src}});"  [ngClass]="(alignment==='left')?'text-left':(alignment==='right')?'text-right':'text-center'">
      <div class="text-white d-flex py-5 px-4 {{color}}"
     >
          <ng-content></ng-content></div>
      </div>`

我得到的是:

//警告:清理不安全的样式值 background-image: url( https://static.pexels.com/photos/51387/mount-everest-himalayas-nuptse-lhotse-51387.jpeg ); (参见 http://g.co/ng/security#xss)。

因为它是 <div> ，我真的不能指望 [ngSrc]。

Answer 1

您可以使用 ngStyle为此:

<div [ngStyle]="{'background-image': 'url(' + src + ')'}">...</div>