如何使用 ngStyle(angular2) 添加 background-image？

问题描述

如何使用 ngStyle 来添加 background-image？我的代码不起作用

this.photo = 'http://dl27.fotosklad.org.ua/20121020/6d0d7b1596285466e8bb06114a88c903.jpg';

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

最佳解决办法

我想你可以试试这个：

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

从阅读你的 ngStyle 表达式，我想你错过了一些”‘” …

次佳解决办法

还可以试试这个：

[style.background-image]="'url(' + photo + ')'"

第三种解决办法

import {BrowserModule, DomSanitizer} from '@angular/platform-browser'

  constructor(private sanitizer:DomSanitizer) {
    this.name = 'Angular!'
    this.backgroundImg = sanitizer.bypassSecurityTrustStyle('url(http://www.freephotos.se/images/photos_medium/white-flower-4.jpg)');
  }

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

也可以看看

• https://angular.io/docs/ts/latest/api/platform-browser/index/DomSanitizer-class.html

• In RC.1 some styles can’t be added using binding syntax

• Plunker example

参考文献

• How to add background-image using ngStyle (angular2)?

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。