css - insertar - Enlace de propiedad de atributo para url de imagen de fondo en Angular 2

atributo title de la imagen

Question

He estado luchando para encontrar la mejor manera de cambiar dinámicamente el atributo de background-image en varios componentes de Angular 2 .

En el siguiente ejemplo, estoy intentando configurar la background-image de background-image de un div en un valor de @Input usando la directiva [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; }
  }

No creo que el problema sea con lo observable, ya que el username muestra y hace algo como <img *ngIf="image" src="{{ image }}"> muestra la imagen. Tengo que acceder al atributo de background-image porque aparentemente esa es la mejor manera de hacer una imagen circular, pero en general me gustaría saber cómo hacerlo.

EDITAR:

Mi declaración [ngStyle] original tenía llaves innecesarias (ngStyle es una directiva que puede tomar una variable) y faltaban etiquetas de cadena alrededor de url() y la image . La forma correcta es (como se responde a continuación) es:

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

Como se indicó en la edición original, también se puede lograr una solución con la clase Renderer en Angular 2. Todavía tengo que hacerlo, pero creo que debería haber una manera con setElementStyles o algo así. Intentaré publicar un ejemplo, pero me encantaría que alguien más me mostrara a mí (y a otros) cómo hacerlo por el momento.

Answer 1

Creo que deberías usar algo así:

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

Donde la image es una propiedad de su componente.

Vea esta pregunta:

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

Answer 2

La razón principal es que usted declaró la variable global como blankImage, pero en su plantilla escribió la imagen. esa es una variable diferente

su código ts **blankImage**: string = ''../assets/.../camera.png'';

el código de su plantilla **<div class="profile-image" [ngStyle]="{''background-image'': ''url('' + **image** + '')''}"></div> . `

solo cambia la imagen a blankImage o viceversa

Answer 3

No necesitas usar NgStyle. También puedes hacer esto:

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

Ver más en ¿Cómo agregar una imagen de fondo usando ngStyle (angular2)?

Answer 4

eso está mal

Creo que deberías agregar:

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

Saludos