web-dev-qa-db-ja.com

ngForのangular 2のimg srcをバインドする方法は？

私のプロジェクトでは、データを取得しています：image src、学生名および学生ID。 生徒名と生徒IDをバインドします。

バインド方法image src in angular 2？

angularngfor
40
paruvelly Vishwanath

Angular 2、4およびAngular 5と互換性があります！

あなたは非常に少ない詳細を提供したので、私はそれらなしであなたの質問に答えようとします。

補間を使用できます：

<img src={{imagePath}} />

または、テンプレート式を使用できます。

<img [src]="imagePath" />

NgForループでは、次のようになります。

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

Angular 2.x to 8 Compatible！

Img src属性で現在のオブジェクトのソースプロパティを直接指定できます。以下の私のコードをご覧ください：

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

注：文字列補間も使用できますが、これは正当な方法ではありません。このためにプロパティバインディングが作成されたため、これを使用する方が適切です。

推奨しません：

<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"
         }]
19
Vishal Gulati
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>
5
Vijay Chauhan

上記のコメントでは、より多くの情報を提供する必要があると言われているので、私はあなたの質問を正しく理解していると思います。

ビューにバインドするには、[property] = "value"を使用しているプロパティバインドを使用します。お役に立てれば。

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

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

</div>
1
tan369