The v-img component is packed with features to support rich media. Combined with the vuetify-loader, you can add dynamic progressive images to provide a better user experience.
The v-img component uses the v-intersect directive which requires a Polyfill for IE11 and Safari. If a browser that does not support this functionality is detected, the image will still load as normal.
Le composantv-img est utilisé pour afficher une image réactive avec un support lazy-load et placeholder.
Sélectionnez le composant désiré ci-dessous afin de voir les props, slots, événements et méthodes disponibles.
Vous trouverez ci-dessous une collection d'exemples simples ou complexes.
Si le ratio d'aspect fourni ne correspond pas à celui de l'image réelle, le comportement par défaut est de remplir autant d'espace que possible, en tronquant les côtés de l'image. L'activation de la propriété contain évitera cela, mais se traduira par un espace vide sur les côtés.
v-img passera automatiquement à la taille de son src, préservant le bon ratio d'aspect. Vous pouvez limiter ce comportement avec les propriétés height et max-height.
Vous pouvez définir un ratio d'aspect fixe si vous voulez changer le ratio d'aspect de l'image.
v-img a un emplacement spécial placeholder pour afficher le un texte par défaut pendant le chargement de l'image. Note: l'exemple ci-dessous a un src mauvais qui ne vous chargera pas pour voir le texte par défaut.
La propriété gradient peut être utilisée pour appliquer une simple superposition de gradient à l'image. Les dégradés plus complexes doivent être écrits comme une classe sur le content slot à la place.
Vous pouvez utiliser v-img pour faire, par exemple, une galerie d'images.
Prêt pour plus ? Continuez la lecture avec :