how to bind img src in angular 2 in ngFor?

paruvelly Vishwanath picture paruvelly Vishwanath · Nov 25, 2016 · Viewed 141.2k times · Source

In my project I am getting data: image src, student name and student id. I bind student name and student id.

How to bind image src in angular 2 ?

Answer

ppovoski picture ppovoski · Nov 25, 2016

Angular 2, 4 and Angular 5 compatible!

You have provided so few details, so I'll try to answer your question without them.

You can use Interpolation:

<img src={{imagePath}} />

Or you can use a template expression:

<img [src]="imagePath" />

In a ngFor loop it might look like this:

<div *ngFor="let student of students">
   <img src={{student.ImagePath}} />
</div>