0

Hago una aplicación en Ionic 4, y quiero poner imagen alusiva de fondo de acuerdo al icono de clima de la api. Open weather map. Funciona CASI todo perfecto, pero...

No logro que aparezca la imagen de fondo

Imagen e icono, tienen el mismo nombre, lo armo en el archivo ts.

this.image_backg = ‘http://www………………..’+…+nombre del icono.png

(el valor que toma es el correcto, lo muestro en pantalla, y si navego web con ese valor, me muestra la imagen perfecto)

Archivo html:

<ion-content no-bounce class="ion-padding" [ngStyle]="{'background-image': 'url(' + image_backg + ')'}">

Otros datos:

ionic (Ionic CLI) : 4.11.0 
 Ionic Framework : @ionic/angular 4.11.5
 cordova (Cordova CLI) : 9.0.0 (cordova-lib@9.0.1)

 Cordova Platforms : android 8.1.0

System:
   Android SDK Tools : 26.1.1 (C:\Android)
   NodeJS : v12.13.1 (C:\Program Files\nodejs\node.exe)
   npm : 6.12.1
   OS : Windows 8.1

1 respuesta 1

0

Resuelto, de la siguiente manera:

agregado al archivo scss:

ion-content {
    --background: none;
}

en el archivo html:

<ion-content 
[style.background-image]="'url(' + image_backg + ')'" 
[style.background-size]="'cover'" 
[style.background-repeat]="'no-repeat'"
>  

en el archivo ts:

  this.image_backg = '../../assets/imgs/xxxxxxx.jpg'
o 
  this.image_backg = 'https://www.........'

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.