it-swarm.com.ru

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

В моем проекте я получаю данные: источник изображения, имя студента и идентификатор студента. Я связываю имя студента и идентификатор студента.

Как связать image src in angular 2?

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

Совместим с 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"
         }]
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