web-dev-qa-db-fra.com

comment lier img src dans angular 2 dans ngFor?

Dans mon projet, je reçois des données: image src, nom de l'étudiant et identifiant de l'étudiant. Je lie nom de l'étudiant et identifiant de l'étudiant.

Comment lier image src à angular 2?

angularngfor
40
paruvelly Vishwanath

angulaire 2, 4 et Angular 5 compatible!

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

Vous pouvez utiliser l'interpolation:

<img src={{imagePath}} />

Ou vous pouvez utiliser une expression de modèle:

<img [src]="imagePath" />

Dans une boucle ngFor, cela pourrait ressembler à ceci:

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

Compatible angulaire 2.x à 8!

Vous pouvez donner directement la propriété source de l'objet actuel dans l'attribut img src. S'il vous plaît voir mon code ci-dessous:

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

REMARQUE: Vous pouvez également utiliser l'interpolation de chaîne, mais ce n'est pas une façon légitime de le faire. La liaison de propriété a été créée à cet effet, donc il est 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 la liaison de propriété. Il est plus utile de l'utiliser pour définir les propriétés. {{}} est une expression d'interpolation de chaîne normale, qui ne révèle à personne qui lit le code que cela a une signification spéciale. L'utilisation de [] permet de repérer facilement les propriétés définies dynamiquement.

Voici mon brochureList contient le json suivant reçu du service (vous pouvez l'affecter à 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"
         }]
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

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

Afin de le lier à votre vue, vous utiliseriez une propriété de liaison qui utilise [property] = "value". J'espère que cela t'aides.

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

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

</div>
1
tan369