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

在我的项目中，我得到数据：图像src、学生姓名和学生id。我绑定学生姓名和学生id

---

如何在angular 2中绑定图像src？

angular 2、4和angular 5兼容

你提供的细节太少了，所以我将尝试在没有这些细节的情况下回答你的问题

可以使用插值：

<img src={{imagePath}} />

也可以使用模板表达式：

<img [src]="imagePath" />

在ngFor循环中，它可能如下所示：

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

---

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

为了将其绑定到视图，您需要使用属性绑定，即使用[property]=“value”。希望这有帮助

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

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

</div>  

{{student.id}
{{student.name}

角度2.x到8兼容

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

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

角度2和角度4
在ngFor循环中，它必须如下所示：
{{u.name}
{{u.name}
{{u.text}}

您需要提供更多信息。组件代码。。。模板代码…如果在从服务器获取图像时我需要在哪里传递一些参数呢？@Vicky你能解释一下你的问题吗？在上面的示例中，在我的系统上有student classOn类型的属性“student”（角度10）绑定。图像标记上的字符串插值仅适用于撇号：请您解释一下为什么

src=“{{宣传册.imageUrl}}”

是“不推荐的”？@TobiasMarschall Its，因为这违背了属性绑定的目的。使用它来设置属性更有意义。{{}}是一个普通的字符串插值表达式，它不会向任何阅读代码的人透露它具有特殊意义。使用[]可以轻松发现动态设置的属性。答案是缺少指向或任何类似引用的链接

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

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