問題描述

如何使用 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>

也可以看看

參考文獻

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。