Ionic - 8.15 Afficher des images avec ion-img, ion-thumbnail et ion-avatar
Jusqu'à présent, la formation utilisait ion-img pour afficher une image. Cette leçon explique pourquoi ion-img est recommandé, en particulier dans les listes virtuelles. Elle présente aussi les composants ion-thumbnail et ion-avatar, qui mettent une image en forme.
Pourquoi utiliser ion-img
ion-img reprend la balise img standard et y ajoute une optimisation. Il charge les images seulement quand c'est nécessaire, et non en avance. Cela allège l'application et aide le site à s'afficher correctement avec une connexion lente ou un appareil peu puissant.
Dans une liste virtuelle, ion-virtual-scroll, il faut toujours utiliser ion-img, car les deux fonctionnent ensemble pour afficher les images au bon moment. En dehors de cette liste, la vidéo recommande tout de même d'utiliser ion-img.
Mettre une image en forme avec ion-thumbnail et ion-avatar
ion-thumbnail affiche une image carrée, et ion-avatar affiche une image arrondie. Ces composants ont pour rôle de donner une présentation soignée au contenu.
Ils ne doivent pas obligatoirement contenir une image. Ils peuvent aussi contenir du texte ou tout autre contenu, et leur rôle reste le même : présenter ce contenu visuellement.
Lorsqu'une image est placée dans une vignette ou un avatar, elle y est intégrée avec ion-img. Le chargement reste ainsi optimisé.
En résumé
ion-img charge les images au moment utile, et s'utilise surtout dans les listes virtuelles. ion-thumbnail et ion-avatar présentent un contenu en carré ou en forme arrondie, avec une image ou du texte. La leçon suivante traite des boutons segmentés.
Points clés
- ion-img charge une image seulement quand elle est nécessaire.
- Dans une liste virtuelle, ion-img doit toujours être utilisé.
- ion-thumbnail présente le contenu dans un carré.
- ion-avatar présente le contenu dans une forme arrondie.
- Ces composants peuvent contenir du texte, pas seulement une image.
Questions fréquentes
Quelle est la différence entre img et ion-img ?
ion-img reprend la balise img et ajoute une optimisation de chargement. La vidéo recommande de l'utiliser dans la plupart des cas.
Un avatar doit-il obligatoirement contenir une image ?
Non, il peut contenir du texte ou un autre contenu. Son rôle est de présenter ce contenu de façon arrondie.
Quelle est la différence entre une vignette et un avatar ?
La vignette ion-thumbnail présente un contenu carré, tandis que l'avatar ion-avatar le présente de manière arrondie.