如何在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>