Comment gérer img src avec Angular quand l'image est non-trouvée ?
Pour afficher une image avec du code HTML, on utilise en principe la balise "<img>". L'attribut "src" sert alors à indiquer l'emplacement de l'image sur votre serveur. Si vous utilisez le framework Angular, vous devez intégrer la logique de composants, ou bien utiliser un répertoire dédié à l'affichage de ressources statiques.
Pour accéder à une image en utilisant le framework Angular, la méthode la plus simple consiste à stocker dans une variable le chemin vers l'image dans le composant. Il s'agit du fichier se terminant par ".component.ts".
export class monApplicationComponent {
cheminImage:any = "url/vers/mon/image.jpg";
}
Ensuite, dans votre fichier HTML, l'attribut doit alors être encadré par des crochets. Il vous suffit ensuite d'indiquer votre variable en valeur de l'attribut et le framework effectuera le remplacement automatiquement lors de l'affichage de la page sur un navigateur internet.
<img [src]="cheminImage"/>
Si vous utilisez le framework AngularJS, qui correspond à la première version d'Angular, la méthode d'affichage diffère. Il faut utiliser l'attribut "ng-src" et indiquer la variable entre deux paires d'accolades pour que le remplacement soit effectué.
<img ng-src="{{imagePath}}"/>
Si vous affichez de nombreuses images sur votre page, cette méthode est fastidieuse. Elle est plutôt réservée à une gestion dynamique des images, avec par exemple des conditions d'affichage. Pour afficher une image statique, le framework possède son propre répertoire dédié, auquel il a accès. Il s'agit du répertoire "assets".
<img src="../assets/images/mon-image.png"/>