如何角4

Question

使用ngStyle背景網址我有以下的html：

<li> 
    <div class="w3l_banner_nav_right_banner1" style="background:url('./assets/images/2.jpg') no-repeat 0px 0px;"> 
     <h3>Make your <span>food</span> with Spicy.</h3> 
      <div class="more"> 
       <a href="products.html" class="button--saqui button--round-l button--text-thick" data-text="Shop now">Shop now</a> 
      </div> 
    </div> 
</li> 

問題：

我想通過動態變量來代替圖像的URL /assets/images/2.jpg像{{ article.uri }}。

我試着用幾個方式從下面參考：

Attribute property binding for background-image url in Angular 2

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

到目前爲止已經試過：

<li *ngFor="let article of arr;let i=index;"> 
    <div *ngIf="i == 0" class="w3l_banner_nav_right_banner" [ngStyle]="{ 'background-url': 'url('+article.uri+')'} no-repeat 0px 0px;"> 
    <h3>Make your <span>food</span> with Spicy.</h3> 
      <div class="more"> 
       <a href="products.html" class="button--saqui button--round-l button--text-thick" data-text="Shop now">Shop now1</a> 
      </div> 
    </div> 

</li> 

我使用Angular 4.1.3

Answer 1

background-url不正確的CSS，請改用background或background-image。

這是正確的語法的例子：

<div [ngStyle]="{'background': '#fff url(' + article.uri + ') no-repeat 0 0'}"></div> 

你完整的例子是這樣的：

<li *ngFor="let article of arr; let i=index;" > 
    <div *ngIf="i == 0" 
     class="w3l_banner_nav_right_banner" 
     [ngStyle]="{'background': '#fff url(' + article.uri + ') no-repeat 0 0'}" > 
    <h3> Make your <span>food</span> with Spicy. </h3> 
      <div class="more"> 
       <a href="products.html" class="button--saqui button--round-l button--text-thick" data-text="Shop now">Shop now1</a> 
      </div> 
    </div> 
</li> 

Answer 2

如果您從遠程來源或用戶輸入中獲取背景圖像，您需要有angular sanitize the url。在你的組件，你會希望添加以下代碼位...

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

export class YourComponent { 
    constructor(private _sanitizer: DomSanitizer) { } 

    public sanitizeImage(image: string) { 
    return this._sanitizer.bypassSecurityTrustStyle(`url(${image})`); 
    } 
} 

嘗試設置你的HTML這個...

<li *ngFor="let article of arr;let i=index;"> 
    <div *ngIf="i == 0" class="w3l_banner_nav_right_banner" [style.background-image]="sanitizeImage(article.uri)"> 
    <h3>Make your <span>food</span> with Spicy.</h3> 
      <div class="more"> 
       <a href="products.html" class="button--saqui button--round-l button--text-thick" data-text="Shop now">Shop now1</a> 
      </div> 
    </div> 
</li> 

而且在某些類，你附加到應用no-repeat 0px 0px; DIV。

Answer 3

爲了解決這個問題，正確的語法是

<div class="modalContainer" 
    ng-style="{'background-image': 'url(' + selectedMeal.url + ')'}"> 

馬克的答案，如果它幫助。

Answer 4

這對我工作得很好：

js文件：

path = 'url(../assets/about.png)'; 

陣列：

string[] = [this.path]; 

和HTML文件：

<div *ngFor="let item of array" [ngStyle]="{'background-image': item}">