comment lier l'image src dans angular 2 dans ngFor ?

Question

Dans mon projet, je reçois des données : source de l'image , nom de l'étudiant y le numéro d'étudiant . Je lie nom de l'étudiant y le numéro d'étudiant .

Comment relier source de l'image en angulaire 2 ?

Answer 1

Compatible avec Angular 2, 4 et Angular 5 !

Vous avez fourni si peu de détails, je vais donc essayer de répondre à votre question sans eux.

Vous pouvez utiliser l'interpolation :

<img src={{imagePath}} />

Ou vous pouvez utiliser une expression modèle :

<img [src]="imagePath" />

Dans un ngFor boucle, ça pourrait ressembler à ça :

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

Answer 2

Compatible avec Angular 2.x à 8 !

Vous pouvez directement donner la propriété source de l'objet courant dans l'attribut img src. Veuillez voir mon code ci-dessous :

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

REMARQUE : Vous pouvez aussi utiliser l'interpolation de chaînes de caractères, mais ce n'est pas un moyen légitime de le faire. La liaison de propriété a été créée dans ce but précis, il est donc préférable de l'utiliser.

NON RECOMMANDÉ :

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

C'est parce que cela va à l'encontre de l'objectif de l'obligation de propriété. Il est plus significatif d'utiliser cela pour définir les propriétés. {{}} est une expression d'interpolation de chaîne normale, qui ne révèle pas à quiconque lit le code qu'elle a une signification particulière. L'utilisation de [] permet de repérer facilement les propriétés qui sont définies de manière dynamique.

Voici mon Liste des brochures contient le json suivant reçu du service (vous pouvez l'assigner à n'importe quelle variable) :

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

J'espère que je comprends bien votre question, car le commentaire ci-dessus indique que vous devez fournir plus d'informations.

Pour le lier à votre vue, vous devez utiliser la liaison de propriété, qui consiste à utiliser [property]="value". J'espère que cela vous aidera.

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

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

</div>