Como adicionar imagem de fundo usando ngStyle (angular2)?

Como usar o ngStyle para adicionar imagem de fundo? Meu código não funciona:

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

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

Eu acho que você poderia tentar isso:

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

Pela leitura de sua ngStyleexpressão, acho que você perdeu alguns "'" ...

Você também pode tentar isso:

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

Veja também

• https://angular.io/docs/ts/latest/api/platform-browser/index/DomSanitizer-class.html
• No RC.1 alguns estilos não podem ser adicionados usando a sintaxe de ligação
• Exemplo de êmbolo

Parece que seu estilo foi higienizado. Para contorná-lo, tente usar o método bypassSecurityTrustStyle do 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>

Use em vez disso

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

Minha imagem de plano de fundo não estava funcionando porque a URL tinha um espaço e, portanto, precisei codificá-la.

Você pode verificar se esse é o problema que está enfrentando tentando um URL de imagem diferente que não tenha caracteres que precisem de escape.

Você poderia fazer isso com os dados no componente apenas usando Javascripts integrados em encodeURI () método .

Pessoalmente, queria criar um pipe para ele para que pudesse ser usado no modelo.

Para fazer isso, você pode criar um tubo muito simples. Por exemplo:

src / app / pipes / 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>

Você pode usar 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>

Observação: é importante cercar o URL com " char.

Geralmente, a imagem não é exibida porque seu URL contém espaços. No seu caso você quase fez tudo certo. Exceto uma coisa - você não adicionou aspas simples como faria se especificar a imagem de fundo em css. Ie

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

Para fazer isso, escape o caractere quot em HTML via \ '

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

Minha solução, usando a instrução if..else. É sempre uma boa prática, se você quiser evitar frustrações desnecessárias, verificar se sua variável existe e está configurada. Caso contrário, forneça uma imagem de backup no caso; Você também pode especificar várias propriedades de estilo, como background-position: centeretc.

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