1
votes

Spécification d'une autre image d'arrière-plan à l'aide de ngStyle

J'essaye de spécifier une image d'arrière-plan alternative pour un DIV comme ceci:

<div [ngStyle]="{'background-image':'url(1.jpg), url(2.jpg)'}"></div>

Aucune des images ne s'affiche (cela fonctionne si je ne spécifie pas d'image alternative).

/ p>

Est-il possible de spécifier plusieurs images d'arrière-plan en utilisant ngStyle?

angular css

3 commentaires

En fonction de ce qu'une image de fond doit être affichée sur l'autre? Ou devraient-ils toujours être montrés tous les deux?

Si le premier ne peut pas être trouvé, le second doit être affiché. Il fonctionne comme du CSS normal mais n'utilise pas le ngStyle d'Angular.

cela fonctionne, veuillez consulter cet exemple: stackblitz.com / edit / angular-yvuaf2? file = src / app /… La première URL a une ressource non valide, donc la deuxième image est rendue.

3 Réponses :

0
votes

Essayez comme ceci

template.html

  isActive: boolean = true;

cmponent.ts

<div class="image" [ngStyle]="{background: !isActive ? 'url(https://www.fonewalls.com/wp-content/uploads/Aqua-Solid-Color-Background-Wallpaper-for-Mobile-Phone.png)' : 'url(https://www.fonewalls.com/wp-content/uploads/Midnight-Blue-Solid-Color-Background-Wallpaper-for-Mobile-Phone.png)'}"></div>

0 commentaires

2
votes

Démo de travail

Fichier de modèle

 export class AppComponent  {

  name = 'Angular';
  img1 = 'https://www.w3schools.com/css/img_flwr.gif';
  img2 = 'https://www.w3schools.com/css/paper.gif'
  isSelected: boolean =  true;
  styles = {};


  setCurrentStyles() {
    this.styles = { 
        backgroundImage: this.isSelected ?
                        `url(${this.img1})`:`url(${this.img2})`
    };
  }

  toogleImage() {
    this.isSelected = !this.isSelected;
    this.setCurrentStyles();
  }
}

1 commentaires

Merci pour cela Saurabh (et à tous les autres qui ont répondu). C'est un joli modèle et je l'ai implémenté.

0
votes

Vous pouvez également garder votre HTML propre en déplaçant toute la logique dans le component.ts.

À la fin, vous auriez quelque chose comme ceci:

private defineBackImage(someArg) {
  if (stuff) {
    this.backgroundImageString = url1;
  } else {
    this.backgroundImageString = url2;
  }
}

Ensuite dans votre composant:

<div class="image" [ngStyle]="{
  'background-image': 'url(' + backgroundImageString + ')'
}"></div>

Vous pouvez déclencher cette fonction sur init ou en fonction d'événements spécifiques, vous pouvez également étendre cette logique pour afficher bien plus de 2 arrière-plans

0 commentaires