Jak dodać obraz tła za pomocą ngStyle (angle2)?

Question

Jak używać ngStyle do dodawania tła? Mój kod nie działa:

this.photo = 'http://dl27.fotosklad.org.ua/20121020/6d0d7b1596285466e8bb06114a88c903.jpg'; 

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

Answer 1

Myślę, że można spróbować to:

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

Od czytania wyrażenie ngStyle, myślę, że brakowało trochę "'" ...

Answer 2

Ponadto można spróbować to:

[style.background-image]="'url(' + photo + ')'"

Answer 3

import {BrowserModule, DomSanitizer} from '@angular/platform-browser' 

    constructor(private sanitizer:DomSanitizer) { 
    this.name = 'Angular!' 
    this.backgroundImg = sanitizer.bypassSecurityTrustStyle('url(http://www.freephotos.se/images/photos_medium/white-flower-4.jpg)'); 
    } 

<div [style.background-image]="backgroundImg"></div> 

Zobacz również

• https://angular.io/docs/ts/latest/api/platform-browser/index/DomSanitizer-class.html
• In RC.1 some styles can't be added using binding syntax
• Plunker example

Answer 4

Wygląda Twój styl zostało oczyszczone, aby przez spróbuj użyć metody bypassSecurityTrustStyle z DomSanitizer.

import { Component, OnInit, Input } from '@angular/core'; 
 
import { DomSanitizer, SafeStyle } from '@angular/platform-browser'; 
 

 
@Component({ 
 
    selector: 'my-component', 
 
    templateUrl: './my-component.component.html', 
 
    styleUrls: ['./my-component.component.scss'] 
 
}) 
 

 
export class MyComponent implements OnInit { 
 

 
    public backgroundImg: SafeStyle; 
 
    @Input() myObject: any; 
 

 
    constructor(private sanitizer: DomSanitizer) {} 
 

 
    ngOnInit() { 
 
    this.backgroundImg = this.sanitizer.bypassSecurityTrustStyle('url(' + this.myObject.ImageUrl + ')'); 
 
    } 
 

 
}

<div *ngIf="backgroundImg.length > 0" [style.background-image]="backgroundImg"></div>

Answer 5

Use Instead 

[ngStyle]="{background:' url(assets/img/' + youtube[0].image + ')'}"