Angular 2 - Dynamically set image URL

Question

The image path is defined in 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)"
What is the correct syntax as this does not work?

Answer 1

The styles are updated according to the value of the expression evaluation:

keys are style names with an optional . suffix (ie 'top.px', 'font-style.em'), values are the values assigned to those properties (expressed in the given unit).

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

Answer 2

Try this

 <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>