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?

use ng-style More on link below apply-css-style-attribute-dynamically-in-angular-js — zeref
– zeref, Commented Jul 23, 2018 at 3:17

Mohammad Daliri · Accepted Answer · 2018-07-23 03:39:24Z

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>

answered Jul 23, 2018 at 3:39

Mohammad Daliri

1,4067 gold badges26 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nishan Dhungana · Accepted Answer · 2018-07-23 05:04:35Z

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>

edited Jul 23, 2018 at 5:04

answered Jul 23, 2018 at 2:40

Nishan Dhungana

8713 gold badges12 silver badges33 bronze badges

1 Comment

Sasa Over a year ago

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?

Collectives™ on Stack Overflow

Angular 2 - Dynamically set image URL

2 Answers 2

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Linked

Related