¿Como cargar imagen en angular 5?

publicado por: Anonymous

<div *ngFor="let datos of archivo" class="card" style="width: 20rem;">
<img class="card-img-top" src="?????" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">{{datos.titulo}}</h5>
<p class="card-text">{{datos.descripcion}}</p>

</div>
</div>

en mi base de datos tengo un registro con el nombre revista.png y en la carpeta /asset/img/revista.png tengo la imagen que tendria que poner dentro del bucle en src ????

solución

Puedes solucionarlo de la siguiente forma:

<div *ngFor="let datos of archivo" class="card" style="width: 20rem;">
  <img class="card-img-top" [src]="'/asset/img/' + datos.imageName" alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">{{datos.titulo}}</h5>
    <p class="card-text">{{datos.descripcion}}</p>
  </div>
</div>

Lo que haces aquí es poner la ruta base '/asset/img/' mas el nombre de la imagen correspondiente a ese item.

También puedes usar String Interpolation (los {{ }}), pero es menos recomendado.

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *