javascript - ngclass - ngstyle example

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

Question

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

Answer 1

Creo que podrías probar esto:

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

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

Answer 2

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 está teniendo probando una URL de imagen diferente que no tiene caracteres que necesitan escapar.

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

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

Answer 3

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>

Answer 4

También puedes probar esto:

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

Answer 5

Usar en su lugar

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

Answer 6

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 utilizando la sintaxis de enlace
• Ejemplo de Plunker