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>

Answer 2

你应该在你的组件代码中使这个url受到信任，并且像这样改变组件模板：

JavascriptExecutor jse = (JavascriptExecutor)driver;
Object result = jse.executeScript("return window.myJSObject;");

import {DomSanitizer} from '@angular/platform-browser';
...

export class OverlayCard {
    @Input() src: string;

    constructor(private sanitizer: DomSanitizer) {
        this.trustedSrc = sanitizer.bypassSecurityTrustUrl(this.src);
    }

如何将背景图像添加到Angular中的<div>？

2 个答案: