Comment ajouter un background-image à l'aide de ngStyle (angular2)?
Comment utiliser ngStyle pour ajouter background-image?
Mon code ne fonctionne pas:
this.photo = 'http://dl27.fotosklad.org.ua/20121020/6d0d7b1596285466e8bb06114a88c903.jpg';
<div [ngStyle]="{'background-image': url(' + photo + ')}"></div>
- pourquoi utilisez-vous les crochets sur ngStyle attribut?
- Voir aussi stackoverflow.com/questions/37076867/... à propos d'un problème lié au RC.1
Vous devez vous connecter pour publier un commentaire.
Je pense que vous pouvez essayer ceci:
À partir de la lecture de votre
ngStyle
expression, je suppose que vous avez manqué certains "'"...this.photo = `url(${photo})`;
[style.background-image]='photo'
.[ngStyle]
et[style.background-image]
rendu de l'échec.Aussi, vous pouvez essayer ceci:
[style.background-image]="'url(' + photo + ')'"
<div [ngStyle]="{ color: 'red', 'font-size': '22px' }">First</div>
et<div [style.color]="'red'" [style.font-size.px]="22">Second</div>
Voir aussi
Ressemble à votre style a été désinfecté, de la contourner essayez d'utiliser bypassSecurityTrustStyle méthode de DomSanitizer.
JS:
HTML:
Utiliser À La Place
Mon image d'arrière-plan ne fonctionnait pas parce que l'URL est un espace et donc j'ai besoin de les encoder, c'.
Vous pouvez vérifier si tel est le problème que vous rencontrez en essayant une autre URL de l'image qui n'ont pas de caractères qui ont besoin de s'échapper.
Vous pouvez faire cela pour que les données dans le composant simplement à l'aide de Javascript intégré dans encodeURI() méthode.
Personnellement, j'ai voulu créer un tuyau de sorte qu'il pourrait être utilisé dans le modèle.
Pour ce faire, vous pouvez créer un simple tuyau.
Par exemple:
src/app/tuyaux/encoder-uri.la pipe.ts
src/app/app.le module.ts
src/app/app.composante.ts
src/app/app.component.html