Comment charger une image sous Angular ?
Les assets constituent toutes les ressources nécessaires au fonctionnement d'un projet développé avec Angular qui ne sont pas des fichiers de code. Ces assets sont des éléments graphiques. Il s'agit donc des images, vidéos ou encore musique nécessaires à l'affichage de votre application. Pour utiliser des images ou d'autres ressources statiques avec le framework Angular, vous devez respecter certaines conditions.
Le framework Angular est développé avec comme élément important la sécurité. Ainsi, il ne peut pas accéder aux fichiers stockés n'importe où dans votre application. Pour pouvoir afficher une ressource statique comme une image, celle-ci doit être située dans le dossier "assets". Le framework dispose de toutes les autorisations nécessaires pour afficher les ressources stockées dans ce dossier. Il est bien entendu possible de créer des sous-dossiers pour classer ses éléments. Vous devez également faire attention avec le nom de la ressource. Il ne doit comporter ni d'espace ni de tiret sinon l'image ne sera pas affichée à l'écran.
<img src="assets/img/monimage.jpg" alt="image"/>
Si vous souhaitez pouvoir changer dynamiquement l'image, il est possible de stocker le chemin dans une variable. Vous pourrez ainsi la modifier en temps réel lors d'un évènement sur la page, comme un clic sur un bouton. Avec Angular, les variables sont entourées par une double accolade.
<img src="{{cheminImage}}" alt="image"/>