web-dev-qa-db-fra.com

Liaison de propriété d'attribut pour l'URL de l'image d'arrière-plan dans Angular 2

Je me suis efforcé de trouver le meilleur moyen de changer dynamiquement l'attribut background-image dans un certain nombre de composants Angular 2.

Dans l'exemple suivant, je tente de définir le background-image d'un div sur une valeur @Input à l'aide de la directive [ngStyle]:

import {Component, Input} from '@angular/core';
import { User } from '../models';

// exporting type aliases to enforce better type safety (https://github.com/ngrx/example-app)
export type UserInput = User;

@Component({
  selector: 'profile-sidenav',
  styles: [ `
    .profile-image {
      background-repeat: no-repeat;
      background-position: 50%;
      border-radius: 50%;
      width: 100px;
      height: 100px;
    }
  `],
  template: `  
    <div class="profile-image" [ngStyle]="{ 'background-image': url({{image}})">
    <h3>{{ username }}</h3>
  `
})

export class ProfileSidenav {
  @Input() user: UserInput;
  blankImage: string = '../assets/.../camera.png';

  // utilizing "getters" to keep templates clean in 'dumb' components (https://github.com/ngrx/example-app) 
  get username() {
    return this.user.username;
  }
  get image() {
    if (!this.user.image) { return this.cameraImage;
    } else { return this.user.image; }
  }

Je ne pense pas que le problème concerne l'observable, puisque username s'affiche et que quelque chose comme <img *ngIf="image" src="{{ image }}"> rend l'image. Je dois accéder à l'attribut background-image parce qu'apparemment c'est le meilleur moyen de créer une image circulaire, mais en général, j'aimerais savoir comment faire cela.

MODIFIER: 

Ma déclaration [ngStyle] originale comportait des accolades inutiles (ngStyle est une directive pouvant prendre une variable) et il manquait des balises string autour de url() et image. La manière correcte est (comme indiqué ci-dessous) est:

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

Comme déclaré dans l'édition originale, une solution peut également être obtenue avec la classe Renderer dans Angular 2. Je ne l'ai pas encore fait, mais je pense qu'il devrait y avoir un moyen d'utiliser setElementStyles ou quelque chose comme ça. Je vais essayer de poster un exemple, mais j'adorerais que quelqu'un d'autre me montre (ainsi que d'autres) comment faire pour le moment.

cssangulartypescriptangular-directive
18
pingo

Je pense que vous devriez utiliser quelque chose comme ça:

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

où image est une propriété de votre composant.

Voir cette question:

41
Thierry Templier

La raison principale est très simple: vous avez déclaré une variable globale en tant que blankImage, mais vous avez saisi une image dans votre modèle. thats deux variable différente 

votre code de ts **blankImage**: string = '../assets/.../camera.png';

votre code de modèle **<div class="profile-image" [ngStyle]="{'background-image': 'url(' + **image** + ')'}"></div>.`

changez simplement l'image en blankImage ou vice-versa

1
Tanvir Alam