css - Angular 4 CSS DIV 背景图像绑定(bind)不起作用

Question

模板:

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

:

private profileImage: any;
private sanitizer:DomSanitizer

从服务获取照片:

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

绑定(bind)无效。我检查了 Chrome 开发工具，没有下载照片。刷新页面时，它工作正常，但在服务中设置值时它必须工作。也尝试过 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作为类(class)的一员，以便可以在 ngOnInit() 中访问.

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

3nd: 从 http 设置图像 HTTP 方案至 https因为您在 Plunker 中收到警告，该警告在 https 上提供内容.

Updated Plunk