web-dev-qa-db-fra.com

Comment ajouter une image de fond avec ngStyle (angular2)?

Comment utiliser ngStyle pour ajouter une image de fond? Mon code ne fonctionne pas:

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

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

Je pense que vous pourriez essayer ceci:

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

En lisant votre expression ngStyle, je suppose que vous avez manqué des "'" ...

189
Thierry Templier

Aussi, vous pouvez essayer ceci:

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

79
Dmytro Tolok
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>

Voir également

22
Günter Zöchbauer

On dirait que votre style a été nettoyé. Pour le contourner, essayez d'utiliser la méthode 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>
6
Uliana Pavelko

Utilisez plutôt

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

Mon image d'arrière-plan ne fonctionnait pas parce que l'URL contenait un espace et que je devais donc l'encoder.

Vous pouvez vérifier si c'est le problème que vous rencontrez en essayant une URL d'image différente qui ne contient pas de caractères à échapper.

Vous pouvez le faire pour les données du composant en utilisant simplement les scripts Javascripts intégrés dans la méthode encodeURI () .

Personnellement, je voulais créer un tuyau pour qu'il puisse être utilisé dans le modèle.

Pour ce faire, vous pouvez créer un tuyau très simple. Par exemple:

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>
0
Tom Benyon