problemas con el background de ngStyle
Publicado por fabiola (1 intervención) el 18/12/2019 23:38:20
Buenas tardes
tengo un problema con mi app en angular 7
al intentar poner como background-image mi imagen no me la muestra, cabe mencionar que esta imagen la obtengo de un servicio, osea va a estar cambiando continuamente y lo que quiero lograr es que la imagen se adapte a mi div y no el div a la imagen que es lo que me está pasando. tengo dos formas de traer la imagen a través de un src con interpolación y a través de ngstyle que no me trae la imagen.
Ese es mi código:
Cabe mencionar que tengo más divs con más ngfor y ngif para que me traiga justo las imagenes y datos que quiero.Y todo lo tengo dentro de un container
tengo un problema con mi app en angular 7
al intentar poner como background-image mi imagen no me la muestra, cabe mencionar que esta imagen la obtengo de un servicio, osea va a estar cambiando continuamente y lo que quiero lograr es que la imagen se adapte a mi div y no el div a la imagen que es lo que me está pasando. tengo dos formas de traer la imagen a través de un src con interpolación y a través de ngstyle que no me trae la imagen.
Ese es mi código:
Cabe mencionar que tengo más divs con más ngfor y ngif para que me traiga justo las imagenes y datos que quiero.Y todo lo tengo dentro de un container
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div fxLayout="row" fxFlex="52" >
<div fxLayout="row" fxLayoutAlign="space-evenly none" class="mb-5" *ngFor="let noticia of mis_noticias;let i = index">
<div fxLayout="column" fxFlex="74" *ngIf="i>2 && i<5 " >
<div [ngStyle]="{backgroundImage : 'url(' + noticia.urlToImage + ')'}" >
<!-- <a href="{{noticia.url}}"> <img class="img-resp" src = "{{noticia.urlToImage}}" ></a>--></div>
<div fxLayout="column" >
<span class="fuente-letter">Fuente : {{noticia.source}}</span>
<a href="{{noticia.url}}" ><h5 class="letter-sub">{{ noticia.title}} </h5></a>
{{noticia.publishedAt | date:'dd-mm-yyyy'}}<br><br>
<p class="pp"> {{ noticia.description }}</p>
</div>
</div>
</div>
</div>
Valora esta pregunta
0