如何在ngFor中绑定img src in angular 2？

Question

在我的项目中，我正在获取数据：image src，学生姓名和学生ID。我绑定学生姓名和学生证号码。

如何绑定image src in angular 2？

Answer 1

Angular 2，4和Angular 5兼容！

你提供了这么几个细节，所以我会尽力在没有它们的情况下回答你的问题。

可以使用插值：

<img src={{imagePath}} /> 

或者你可以使用一个模板表达式：

<img [src]="imagePath" /> 

在ngFor循环就可能是这样的：

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

Answer 2

希望我正确理解你的问题，因为上面的评论说你需要提供更多信息。

为了将它绑定到你的视图，你可以使用使用[property] =“value”的属性绑定。希望这可以帮助。

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

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

</div> 

Answer 3

角度2,4和5兼容！

您可以直接在img src属性中给出currnet对象的source属性。请参阅下面我的代码：

<div *ngFor="let brochure of brochureList"> 
    <img class="brochure-poster" [src]="brochure.imageUrl" /> 
</div> 

注意：您可以如用串插但那不是leghit办法做到这一点。属性绑定是为了这个目的而创建的，因此更好地使用它。

不被推荐：

<img class="brochure-poster" src="{{brochure.imageUrl}}"/> 

这里是我的brochureList包含服务收到了以下JSON（你可以将它分配给任何一个变量）：

[ { 
      "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" 
     }] 

Answer 4

Angular 2 and Angular 4 

In a ngFor loop it must be look like this: 

<div class="column" *ngFor="let u of events "> 
       <div class="thumb"> 
        <img src="assets/uploads/{{u.image}}"> 
        <h4>{{u.name}}</h4> 
       </div> 
       <div class="info"> 
        <img src="assets/uploads/{{u.image}}"> 
        <h4>{{u.name}}</h4> 
        <p>{{u.text}}</p> 
       </div> 
      </div>