Maison > interface Web > tutoriel CSS > Comment appliquer correctement une image d'arrière-plan avec ngStyle dans Angular 2 ?

Comment appliquer correctement une image d'arrière-plan avec ngStyle dans Angular 2 ?

Mary-Kate Olsen
Libérer: 2024-10-30 22:12:02
original
351 Les gens l'ont consulté

How to Properly Apply a Background Image with ngStyle in Angular 2?

Application d'une image d'arrière-plan avec ngStyle dans Angular 2

Lorsque vous essayez d'ajouter une image d'arrière-plan à l'aide de ngStyle dans Angular 2, vous pouvez rencontrer un problème où votre code ne fonctionne pas. Ce problème survient généralement en raison d'une syntaxe incorrecte dans l'expression ngStyle.

Pour réussir à ajouter une image d'arrière-plan à l'aide de ngStyle, vous devez construire votre expression comme suit :

<code class="ts"><div [ngStyle]="{'background-image': 'url(' + photo + ')'}"</div></code>
Copier après la connexion

Dans votre extrait de code initial , vous avez omis les guillemets simples entourant l'URL. Cette correction garantit qu'Angular 2 interprète correctement l'URL et l'attribue comme image d'arrière-plan pour l'élément.

En adhérant à cette syntaxe, vous pouvez appliquer efficacement des images d'arrière-plan aux éléments en utilisant ngStyle dans vos applications Angular 2.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal