cách liên kết img src trong góc 2 trong ngFor?

Question

Trong dự án của tôi, tôi đang nhận dữ liệu: image src, tên sinh viên và id sinh viên. Tôi liên kết tên sinh viên và id sinh viên.

Cách liên kết image src trong góc 2?

Answer 1

Góc 2, 4 và Góc 5 tương thích!

Bạn đã cung cấp rất ít chi tiết, vì vậy tôi sẽ cố gắng trả lời câu hỏi của bạn mà không cần chúng.

Bạn có thể sử dụng nội suy:

<img src={{imagePath}} /> 

Hoặc bạn có thể sử dụng một biểu mẫu:

<img [src]="imagePath" /> 

Trong một vòng lặp ngFor nó có thể trông như thế này:

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

Answer 2

Tôi hy vọng tôi hiểu câu hỏi của bạn một cách chính xác, như nhận xét ở trên nói rằng bạn cần cung cấp thêm thông tin.

Để liên kết nó với chế độ xem của bạn, bạn sẽ sử dụng thuộc tính bắt buộc sử dụng [thuộc tính] = "giá trị". Hi vọng điêu nay co ich.

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

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

</div> 

Answer 3

Góc 2, 4 và 5 Tương thích!

Bạn có thể trực tiếp cung cấp thuộc tính nguồn của đối tượng currnet trong thuộc tính img src. Vui lòng xem mã của tôi bên dưới:

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

LƯU Ý: Bạn cũng có thể sử dụng phép nội suy chuỗi nhưng không phải cách thực hiện. Bất động sản ràng buộc đã được tạo ra cho mục đích này vì thế tốt hơn sử dụng này.

KHÔNG NÊN:

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

Sau đây là tôi brochureList chứa json sau nhận được từ dịch vụ (bạn có thể gán nó cho bất kỳ biến):

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