Angular 2 - 動態設置圖像URL

Question

圖像路徑在item.imagePath中定義。

<div *ngFor="let item of itemList">
   <div style="background-image: url(item.imagePath)" class="thumb">
       <span>{{item.productName}}</span>
   </div>
   <div>
       <p>{{item.productFeature}}</p>
   </div>
</div>

style="background-image: url(item.imagePath)"
什么是正確的語法，因為這不起作用？

Answer 1

樣式根據表達式評估的值更新：

鍵是具有可選項的樣式名稱。 后綴（即'top.px'，'font-style.em'），值是分配給這些屬性的值（以給定單位表示）。

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

Answer 2

試試這個

 <div *ngFor="let item of itemList">
       <div class="thumb">
           <img src="{{item.imagePath}}" />
           <span>{{item.productName}}</span>
       </div>
       <div>
           <p>{{item.productFeature}}</p>
       </div>
    </div>