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>

Answer 4

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

为了将它绑定到您的视图，您将使用属性绑定，该绑定使用[property] =＆＃34; value＆＃34;。希望这会有所帮助。

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

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

</div>

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

4 个答案: