Aller au contenu principal

16-3 Affichage de l'image

L'image du projet n'est pas affichée et il s'agit de la dernière étape afin d'avoir une liste complète contenant les propriétés importantes d'un projet.

Vérifier l'existence de l'image avec @if et l'afficher​

On peut vérifier l'existence de l'attribut image_url et ne faire afficher l'image que si elle est présente à l'aide de la directive @if.

Par exemple:

src/app/features/projets/components/projets-liste.ts
<img *ngIf="projet.image" src="{{projet.image[0].url}}" alt="Image du projet" />

Si vous avez une image pour un projet, vous obtiendrez quelque chose comme ceci:

http://localhost:4200

Ajouter une image par défaut​

Il est pratique courante d'afficher une image par défaut lorsqu'aucune image n'est fournie par l'utilisateur. Cela permet de garder le visuel cohérent en assumant qu'une image sera toujours affichée.

Pour cela, on pourrait ajouter un autre @if qui teste la condition inverse et affiche une image par défaut dans le cas où aucune n'aurait été spécifiée. Ou encore, utiliser @else sur la condition existante.

Ajouter une image au projet​

Lorsque vous avez une image stockée localement que vous voulez rendre accessible à l'application, vous devez la mettre dans le dossier public. En effet, le dossier public contient les assets statiques de l'application.

  1. Créer un dossier images sous le dossier public
  2. Déposez-y une image de votre choix pouvant être utilisée comme image par défaut

L'image par défaut que j'ai utilisé de mon côté est la suivante: https://i.imgur.com/LBBdeAu.png

Intégrer l'image par défaut au HTML​

On peut utiliser un @if avec @else afin de faire afficher l'image contenue dans le dossier public/images.

src/app/features/projets/components/projets-liste.ts
@if(projet.image_url) {
  <img src="{{projet.image_url}}" alt="image du projet {{projet.nom}}">
} @else {
  <img src="/images/projet-default.png" alt="Image par défaut, projet sans image">
}
info

Vous n'avez pas à inclure le dossier public, Angular le chemin absolu / comme étant la racine du dossier public.

Vous devriez obtenir quelque chose comme:

http://localhost:4200

Optimiser à l'aide d'un if ternaire​

Il est possible d'éviter la répétition de deux balises img en utilisant plutôt un if ternaire. En effet, on répète essentiellement la même balise deux fois pour une simple condition de présence d'un attribut. Parfois, on n'a pas le choix, mais ici on peut facilement optimiser sans perdre de clarté au niveau du code.

src/app/pages/projets/components/projets-liste.component.ts
<img src="{{projet.image_url ? projet.image_url : '/images/projet-default.png'}}" alt="image du projet {{projet.nom}}">
info

Il est possible, entre les accolades permettant d'afficher des données {{ }} d'apposer une condition tel un if ternaire pour afficher une valeur ou une autre.

Ici, si l'image existe dans le tableau, on retourne l'URL de cette dernière, sinon on prend l'URL de l'image par défaut.