Как связать img src в angular 2 в ngFor?

Ответ 1

Angular 2, 4 и Angular 5 совместимы!

Вы предоставили так мало деталей, поэтому я постараюсь ответить на ваш вопрос без них.

Вы можете использовать Интерполяцию:

<img src={{imagePath}} />

Или вы можете использовать выражение шаблона:

<img [src]="imagePath" />

В цикле ngFor это может выглядеть так:

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

Ответ 2

Совместим с 2.x до 8!

Вы можете напрямую указать исходное свойство текущего объекта в атрибуте img src. Пожалуйста, смотрите мой код ниже:

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

ПРИМЕЧАНИЕ. Вы также можете использовать интерполяцию строк, но это не является законным способом сделать это. Привязка свойств была создана именно для этой цели, поэтому лучше использовать это.

НЕ РЕКОМЕНДУЕТСЯ :

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

Это потому что это побеждает цель связывания собственности. Более целесообразно использовать это для установки свойств. {{}} - это обычное выражение для интерполяции строк, которое не раскрывает никому, читающему код, что оно имеет особое значение. Использование [] позволяет легко определить свойства, которые устанавливаются динамически.

Вот мой брошюрный список содержит следующий 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"
         }]

Ответ 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>

Ответ 4

Надеюсь, что правильно понимаю ваш вопрос, поскольку в приведенном выше комментарии говорится, что вам нужно предоставить дополнительную информацию.

Чтобы привязать его к вашему представлению, вы должны использовать привязку свойств, которая использует [property] = "value". Надеюсь, это поможет.

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

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

</div>