¿Cómo agregar una imagen de fondo usando ngStyle (angular2)?

¿Cómo usar ngStyle para agregar una imagen de fondo? Mi código no funciona:

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

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

Creo que podrías probar esto:

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

Al leer tu ngStyleexpresión, supongo que te perdiste algunos "'" ...

También puedes probar esto:

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

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>

Ver también

• https://angular.io/docs/ts/latest/api/platform-browser/index/DomSanitizer-class.html
• En RC.1 algunos estilos no se pueden agregar usando sintaxis de enlace
• Ejemplo de plunker

Parece que su estilo ha sido desinfectado, para evitarlo, intente usar el método bypassSecurityTrustStyle de 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>

Usar en su lugar

[ngStyle]="{'background-image':' url(' + instagram?.image + ')'}"

Mi imagen de fondo no funcionaba porque la URL tenía un espacio y, por lo tanto, necesitaba codificarla.

Puede verificar si este es el problema que tiene probando una URL de imagen diferente que no tenga caracteres que deban escapar.

Puede hacer esto con los datos en el componente simplemente usando Javascripts integrados en encodeURI () método .

Personalmente, quería crear una tubería para que pudiera usarse en la plantilla.

Para hacer esto, puede crear una tubería muy simple. Por ejemplo:

src / app / pipe / encode-uri.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'encodeUri'
})
export class EncodeUriPipe implements PipeTransform {

  transform(value: any, args?: any): any {
    return encodeURI(value);
  }
}

src / app / app.module.ts

import { EncodeUriPipe } from './pipes/encode-uri.pipe';
...

@NgModule({
  imports: [
    BrowserModule,
    AppRoutingModule
    ...
  ],
  exports: [
    ...
  ],
 declarations: [
    AppComponent,
    EncodeUriPipe
 ],
 bootstrap: [ AppComponent ]
})

export class AppModule { }

src / app / app.component.ts

import {Component} from '@angular/core';

@Component({
  // tslint:disable-next-line
  selector: 'body',
  template: '<router-outlet></router-outlet>'
})
export class AppComponent {
  myUrlVariable: string;
  constructor() {
    this.myUrlVariable = 'http://myimagewith space init.com';
  }
}

src / app / app.component.html

<div [style.background-image]="'url(' + (myUrlVariable | encodeUri) + ')'" ></div>

Puede utilizar 2 métodos:

Método 1

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

Método 2

<div [style.background-image]="'url(&quot;' + photo + '&quot;)'"></div>

Nota: es importante rodear la URL con " char.

En general, la imagen no se muestra porque su URL contiene espacios. En tu caso, casi hiciste todo bien. Excepto una cosa: no ha agregado comillas simples como lo hace si especifica la imagen de fondo en css Es decir

.bg-img {                \/          \/
    background-image: url('http://...');
}

Para hacerlo, escape el carácter de comillas en HTML mediante \ '

                                          \/                                  \/
<div [ngStyle]="{'background-image': 'url(\''+ item.color.catalogImageLink + '\')'}"></div>

Mi solución, usando la declaración if..else. Siempre es una buena práctica, si quiere evitar frustraciones innecesarias, comprobar que su variable existe y está configurada. De lo contrario, proporcione una imagen de respaldo por si acaso; También puede especificar varias propiedades de estilo, como background-position: center, etc.

<div [ngStyle]="{'background-image': this.photo ? 'url(' + this.photo + ')' : 'https://placehold.it/70x70', 'background-position': 'center' }"></div>