ng-src

Syntaxe

Paramètres

Description

Cette directive permet d'indiquer l'attribut source pour une balise «img».

Remarques

• Utilité principale : La directive ng-src est utilisée pour définir dynamiquement l'attribut src d'un élément <img> du HTML en fonction des données du modèle AngularJS. Contrairement à l'attribut HTML classique src, elle empêche le navigateur de tenter de charger une URL invalide avant que le modèle soit compilé, évitant ainsi des erreurs 404 inutiles.
• Problème résolu : Si vous utilisez directement l'attribut src avec des expressions Angular, le navigateur essaiera de charger littéralement le texte de l'expression (par exemple {{imageUrl}}) avant qu'Angular ne l'interprète. Avec ng-src, Angular insère correctement la valeur une fois qu'elle est disponible, évitant les comportements imprévus.
• Compatibilité avec les modèles dynamiques : ng-src est particulièrement utile dans des cas où les URL des images sont générées dynamiquement à partir d'une base de données ou d'un service. Par exemple : <img ng-src="{{imagePath}}"> garantit que l'image ne sera chargée qu'une fois que imagePath est défini.
• Expression Angular : La valeur attribuée à ng-src peut être une expression complexe combinant plusieurs propriétés du modèle ou des données.
• Performance améliorée : En évitant les requêtes inutiles pour des URL invalides, ng-src peut réduire les erreurs réseau et améliorer les performances de l'application, notamment dans des environnements où les utilisateurs ont des connexions lentes ou instables.
• Impact sur l'optimisation SEO : Si vous avez besoin que les moteurs de recherche indexent les images correctement, ng-src peut poser problème, car les bots des moteurs de recherche peuvent ne pas interpréter JavaScript et donc ne pas voir les images dynamiques. Une solution pourrait être le rendu côté serveur.
• Ne s'applique pas aux balises non-HTML5 : Bien que ng-src soit principalement utilisé avec <img>, il est aussi pertinent pour <video> et <audio> utilisant des attributs comme src. Cela garantit que la source multimédia est correctement chargée une fois le modèle résolu.
• Meilleures pratiques : Il est recommandé d'utiliser ng-src uniquement lorsque le chemin de l'image dépend du modèle Angular. Pour les images statiques ou celles ne dépendant pas de données dynamiques, l'attribut HTML classique src suffit, simplifiant ainsi le code.