Question

模板：

<div [style.background-image]="profileImage" ></div>

TS：

private profileImage: any;
private sanitizer:DomSanitizer

从服务中获取照片：

this.profileImage = this.sanitizer.bypassSecurityTrustStyle("url("+ data.photo  + ")");

绑定无效。我查看了Chrome Dev工具，没有下载照片。刷新页面时，它工作正常，但必须在服务中设置值时工作。尝试使用ngStyle，它也无法正常工作。

Plunkr链接https://plnkr.co/edit/IhVGjiImyfk0F1u6cWtG?p=preview

Answer 1

我更新了一些代码以便工作：

@Component({
  selector: 'my-app',
  template: `
    <div [style.background-image]="profileImage" style="width: 961px; height: 688px;"></div>
    <h2> {{message}}</h2>
  `,
})
export class App {

  profileImage: string;
  message: string;

  constructor(private sanitizer: DomSanitizer) {
    this.message = "Before async";
  }

  async ngOnInit() {
    await delay(2000);
    this.message = "Updating Photo";
    const url = 'https://4.bp.blogspot.com/--RBVfn6FzOI/Tq5kOxFGKEI/AAAAAAAACnM/LaiZLD0sUKY/s1600/cats.jpg';
    this.profileImage = this.sanitizer.bypassSecurityTrustStyle(`url(${url})`);
  }
}

<强>更改

第一名：更改：

constructor(sanitizer: DomSanitizer)

进入这个：

constructor(private sanitizer: DomSanitizer)

因此，sanitizer作为班级成员才能在ngOnInit()中访问。

第二名：设置<div>的维度。这不会自动调整为您的背景图像大小。所以我设置了width和height。存在其他解决方案，例如使用图像的纵横比，或保持不可见的<img>。 this answer中描述了这些以及更多内容。

3nd：将图片HTTP方案从http设置为https，因为您在Plunker中收到一条提供超过https内容的警告。

Updated Plunk

Angular 4 CSS DIV背景图像绑定不起作用

1 个答案: