how to bind img src in angular 2 in ngFor

Question

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

User · Answer

I hope i am understanding your question correctly, as the above comment says you need to provide more information.

In order to bind it to your view you would use property binding which is using [property]="value". Hope this helps.

<div *ngFor="let student of students">  
 {{student.id}}
 {{student.name}}

 <img [src]="student.image">

</div>

User · Answer

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    lt img src   imagePath     gt    Or you can use a template expression    lt img  src   imagePath    gt    In a ngFor loop it might look like this    lt div  ngFor  let student of students  gt      lt img src   student ImagePath     gt   lt  div gt

User · Answer

Angular 2 and Angular 4   In a ngFor loop it must be look like this    lt div class  column   ngFor  let u of events   gt                   lt div class  thumb  gt                       lt img src  assets uploads   u image    gt                       lt h4 gt   u name   lt  h4 gt                   lt  div gt                   lt div class  info  gt                       lt img src  assets uploads   u image    gt                       lt h4 gt   u name   lt  h4 gt                       lt p gt   u text   lt  p gt                   lt  div gt               lt  div gt

User · Answer

Angular 2 x to 8 Compatible   You can directly give the source property of the current object in the img src attribute  Please see my code below    lt div  ngFor  let brochure of brochureList  gt       lt img class  brochure-poster   src   brochure imageUrl    gt   lt  div gt    NOTE  You can as well use string interpolation but that is not a legit way to do it  Property binding was created for this very purpose hence better use this   NOT RECOMMENDED     lt img class  brochure-poster  src    brochure imageUrl     gt    Its because that defeats the purpose of property binding  It is more meaningful to use that for setting the properties       is a normal string interpolation expression  that does not reveal to anyone reading the code that it makes special meaning  Using    makes it easily to spot the properties that are set dynamically   Here is my brochureList contains the following json received from service you can assign it to any variable                     productId  1               productName   Beauty Products                productCode    XXXXXX                            description     Skin Care                           imageUrl   app Images c1 jpg                                      productId  2               productName   Samsung Galaxy J5                productCode    MOB-124                      description     8GB  Gold                imageUrl   app Images c8 jpg

[angular] how to bind img src in angular 2 in ngFor?

Examples related to angular

Examples related to ngfor