Comment définir dynamiquement des images d'arrière-plan dans AngularJS sans erreurs ?

Résolution des erreurs d'arrière-plan d'image dans AngularJS

Dans AngularJS, ng-src sert de protection contre les erreurs d'URL non valides avant l'évaluation des variables. Cependant, pour les images d'arrière-plan dans les éléments DIV, l'utilisation de la propriété background-size de CSS3 présente un défi lorsque des variables sont incorporées dans l'URL.

Ce problème peut entraîner de nombreux messages d'erreur en raison de l'interprétation par le navigateur d'une image non valide. URL. Bien que l'approche grossière consistant à utiliser {{"style='background-image:url(myVariableUrl)'"}} soit possible, elle n'est pas considérée comme une solution élégante.

Solution :

Pour résoudre ce problème, le code AngularJS suivant peut être utilisé :

<code class="html"><li ng-style="{'background-image':'url(/static/'+imgURL+')'}">...</li></code>

Ce code définit l'image d'arrière-plan à l'aide de la directive ng-style, où l'URL est générée dynamiquement à partir de la variable imgURL . Le préfixe '/static/' et les guillemets simples sont cruciaux pour la bonne construction de l'URL. En incorporant ce code, vous pouvez efficacement éviter les erreurs d'arrière-plan de l'image tout en gardant le contrôle sur les URL des images via des variables.

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!