imagen - ¿Cómo enlazar img src en angular 2 en ngFor?

img src angular4

Question

En mi proyecto estoy obteniendo datos: imagen src , nombre del estudiante e identificación del estudiante . Ato el nombre del estudiante y la identificación del estudiante .

¿Cómo enlazar imagen src en angular 2?

Answer 1

Espero que esté entendiendo su pregunta correctamente, ya que el comentario anterior dice que necesita proporcionar más información.

Para enlazarlo a su vista, usaría el enlace de propiedades que usa [propiedad] = "valor". Espero que esto ayude.

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

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

</div>  

Answer 2

Angular 2, 4 y 5 compatibles!

Puede dar directamente la propiedad de origen del objeto currnet en el atributo img src. Por favor vea mi código abajo:

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

NOTA: También puede utilizar la interpolación de cadenas, pero esa no es la forma más sencilla de hacerlo. La vinculación de propiedades fue creada para este propósito, por lo tanto, mejor uso de esto

NO RECOMENDADO :

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

Aquí está mi lista de folletos que contiene el siguiente json recibido del servicio (puede asignarlo a cualquier 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, 4 y Angular 5 compatibles!

Usted ha proporcionado tan pocos detalles, así que intentaré responder su pregunta sin ellos.

Puedes usar interpolación:

<img src={{imagePath}} />

O puedes usar una expresión de plantilla:

<img [src]="imagePath" />

En un bucle ngFor podría verse así:

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

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>