使用 ngStyle 指定备用背景图像

Question

I am trying to specify an alternate background image for a DIV like so:

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

Neither of the images are displaying (it works if I don't specify an alternate image).

Is it possible to specify multiple background images using ngStyle ?

Answer 1

Working demo

Template file

  <div  [ngStyle]='styles'>
      <h1>Lorem Ipsum Dolor</h1>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
      </div>

Ts file

 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();
  }
}

Answer 2

Try like this

template.html

<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>

cmponent.ts

  isActive: boolean = true;

Answer 3

You can also keep your HTML clean with moving all the logic into the component.ts.

In the end you would have something like this:

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

Then in your component:

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

You can trigger this function on init of according to specific events, also you can extend this logic to display much more than 2 backgrounds