Propriété d'attribut de liaison fond-url de l'image dans Angulaire 2
J'ai eu du mal à trouver le meilleur moyen de changer dynamiquement la background-image
attribut dans un certain nombre de Angulaire 2 composants.
Dans l'exemple suivant, je suis tenté de mettre le background-image
d'un div pour un @Input
valeur à l'aide de [ngStyle]
directive:
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 est avec le observables, depuis username
affiche et de faire quelque chose comme <img *ngIf="image" src="{{ image }}">
rend l'image. - Je accès à la background-image
attribut parce qu'apparemment c'est le meilleur moyen de faire une image circulaire, mais en général voudrais savoir comment faire cela.
EDIT:
Mon original [ngStyle]
déclaration était inutile accolades (ngStyle est une directive que peut prendre une variable), et manquait de la chaîne des balises autour de url()
et image
. La manière correcte est (comme spécifié ci-dessous) est:
<div class="profile-image" [ngStyle]="{'background-image': 'url(' + image + ')'}"></div>`.
Comme a déclaré dans l'original edition, une solution peut également être réalisé avec l' Convertisseur classe Angulaire 2. Je n'ai pas encore le faire, mais pense qu'il devrait y avoir un moyen avec setElementStyles
ou quelque chose comme ça. Je vais essayer de poster un exemple, mais j'aimerais si quelqu'un d'autre m'a montré (et d'autres) comment pour le moment.
OriginalL'auteur pingo | 2016-06-01
Vous devez vous connecter pour publier un commentaire.
Je pense que vous devriez utiliser quelque chose comme ça:
où
image
est une propriété du composant.Voir cette question:
<div class="profile-image" [ngStyle]="{ 'background-image': 'url(' + {{image}} + ')'}">
A-t-elle à voir avec la façon dont j'ai
image
défini? Votre exemple (ainsi que les extra accolade) ne cause pas d'erreur, mais l'image n'est toujours pas rendu :/. J'ai essayé de mettreblankImage
là (définis localement au lieu d'un observable), mais le même résultat. @ThierryNvm, réussi à le faire fonctionner. Le
blankImage
j'ai été référencement eu quelques espaces dans le chemin, de sorte que c'était à l'origine du problème.essayé de l'édition de votre réponse d'ajouter un petit accolade, mais il n'était pas 6 caractères (minimum requis). Merci d'éditer donc je ne peux l'accepter! Merci !
Voir aussi stackoverflow.com/questions/37076867/...
OriginalL'auteur Thierry Templier
Vous n'avez pas besoin d'utiliser NgStyle. Vous pouvez également le faire:
[style.background-image]="'url(' + image + ')'"
Voir plus à Comment ajouter un background-image à l'aide de ngStyle (angular2)?
OriginalL'auteur redfox05
que c'est faux
Je pense que vous devriez ajouter:
Ce qui concerne
OriginalL'auteur Amir.S