如何在ngFor中绑定角度2中的img src？

Question

在我的项目中我得到数据:图像src,学生姓名和学生ID.我绑定学生姓名和学生ID.

如何在角度2中绑定图像src？

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

Angular 2.x到7兼容!

您可以直接在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 3

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>