3

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?

Mohammad Daliri
  • 1,370
  • 6
  • 20
  • 43
Sasa
  • 205
  • 1
  • 3
  • 16
  • use **ng-style** More on link below [apply-css-style-attribute-dynamically-in-angular-js](https://stackoverflow.com/questions/21364445/apply-css-style-attribute-dynamically-in-angular-js) – zeref Jul 23 '18 at 03:17

2 Answers2

3

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>
Mohammad Daliri
  • 1,370
  • 6
  • 20
  • 43
0

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>
Nishan Dhungana
  • 831
  • 3
  • 11
  • 30
  • it seems like img src is workable if the path is absolute, item.imagePath that I have is relative, thus would require to generate the url (background-image:url). Do you have alternative? – Sasa Jul 23 '18 at 03:02