角度4 CSS DIV背景图像绑定不'；行不通

模板：

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

从服务获取照片：

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

绑定不起作用。我检查了Chrome开发工具，照片没有下载。刷新页面时，它工作正常，但在服务中设置该值时，它必须工作。用ngStyle也试过了，它不起作用

---

Plunkr link

为了工作，我对您的代码进行了一些更新：

@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})`);
  }
}

@组件({
选择器：“我的应用程序”，
模板：`
{{message}}
`,
})
导出类应用程序{
profileImage:string；
消息：字符串；
构造函数（专用消毒器：DomSanitizer）{
this.message=“Before async”；
}
异步ngOnInit（）{
等待延迟（2000年）；
this.message=“更新照片”；
常量url=https://4.bp.blogspot.com/--RBVfn6FzOI/Tq5kOxFGKEI/AAAAAAAACnM/LaiZLD0sUKY/s1600/cats.jpg';
this.profileImage=this.sanitizer.bypassSecurityTrustStyle（`url（${url}）`）；
}
}

更改

第一名：更改：

constructor（sanitizer:DomSanitizer）

为此：

constructor（私有消毒剂：DomSanitizer）

因此，将

消毒剂

作为类的成员，以便在

ngOnInit（）

中访问

2nd:设置

的尺寸。这将不会自动调整到您的背景图像大小。所以我设置了

宽度

和

高度

。还有其他解决方案，如使用图像的纵横比，或保持不可见的

。中介绍了这些以及更多内容

3nd:将图像HTTP方案从

HTTP

设置为

https

，因为您在Plunker中收到警告，该警告通过

https

提供内容

---

我不明白提神如何让它起作用？它仍在示例过程中。你能展示更多的代码和项目结构吗？在这个例子中效果很好。plunkr适用于简单的情况，但当从服务中检索数据时，它就不存在了。plunkr表明它不适用于引号，也不适用。检查上面的按钮link@jaks很抱歉，我之前的评论很愚蠢-

url（…）|url（“…”）|url（“…”）

是等效的。我用一个有效的版本更新了我的评论。真正的问题来自HTTP服务，映像被设置了。所以它没有更新。现在把代码放在ngZone中，并开始工作。

@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})`);
  }
}