SImage <s-image>

Affiche une image en contrôlant le ratio, l'ajustement, les bordures et le chargement différé. SImage est le wrapper Vue 3 typé du web component <s-image> de Shopify Polaris.

import { SImage } from 'polaris-vue-elements'

Bonnes pratiques

• Utilisez des images nettes et optimisées. Choisissez des images en haute résolution qui sont aussi optimisées pour le web.
• Ajoutez des images utiles. N'incluez une image que lorsqu'elle clarifie le contenu ou aide à guider les marchands.

Consultez les bonnes pratiques de Shopify pour <s-image> (en anglais) pour l'ensemble des recommandations.

Exemple

L'image ci-dessous est chargée depuis picsum.photos, un service tiers d'images de remplacement, uniquement à des fins de démonstration.

<script setup>
import { SImage } from 'polaris-vue-elements'
</script>

<template>
  <SImage
    src="https://picsum.photos/seed/polaris-image/400/300"
    alt="Placeholder scenic photo"
    aspectRatio="4/3"
    inlineSize="fill"
    objectFit="cover"
    borderRadius="200"
    style="width: 220px"
  />
</template>

Props

Prop	Type	Description
accessibilityRole	"presentation" | "none" | "img"	La signification sémantique du contenu du composant. Lorsqu'il est défini, le rôle est utilisé par les technologies d'assistance pour aider les utilisateurs à naviguer dans la page. - none : masque complètement l'élément et son contenu aux technologies d'assistance - presentation : supprime la signification sémantique, rendant l'image purement décorative et ignorée par les lecteurs d'écran. - img : identifie l'élément comme une image qui transmet une information utile aux utilisateurs.
alt	string	Une description textuelle alternative de l'image, permettant au lecteur de comprendre ce qu'elle représente. Elle est extrêmement utile aussi bien aux utilisateurs de technologies d'assistance qu'aux utilisateurs voyants. Une description bien rédigée permet aux personnes malvoyantes d'accéder au contenu non textuel. Lorsqu'un lecteur d'écran rencontre un s-image, la description est lue et annoncée à voix haute. Si une image ne se charge pas, par exemple à cause d'une mauvaise connexion, l'alt s'affiche à l'écran à la place. Un acheteur voyant sait ainsi qu'une image devait se charger à cet endroit, tout en pouvant consulter le contenu textuel. Lisez les points à considérer pour rédiger un texte alternatif pour en savoir plus.
aspectRatio	${number}` | `${number}/${number}` | `${number}/ ${number}` | `${number} /${number}` | `${number} / ${number}	Le ratio d'aspect de l'image. Le rendu de l'image dépend de la valeur de inlineSize : - inlineSize="fill" : le ratio d'aspect est respecté et l'image occupe l'espace nécessaire. - inlineSize="auto" : l'image ne s'affiche qu'une fois chargée et le ratio d'aspect est ignoré. Par exemple, si la valeur est 50 / 100, le getter renvoie 50 / 100. Si la valeur est 0.5, le getter renvoie 0.5 / 1. En savoir plus sur la propriété aspect-ratio.
border	BorderShorthand	Une bordure définie avec une syntaxe raccourcie pour indiquer la largeur, la couleur et le style en une seule propriété.
borderColor	"subdued" | "base" | "strong"	La couleur de la bordure, issue de l'échelle de couleurs du design system. Lorsqu'elle est définie, elle remplace la couleur indiquée dans la propriété border. Choisissez subdued, base ou strong selon l'emphase visuelle souhaitée.
borderRadius	MaybeAllValuesShorthandProperty<BoxBorderRadii>	L'arrondi des coins de l'élément, selon l'échelle de rayons du design system. Prend en charge la syntaxe à 1 à 4 valeurs pour définir des rayons différents par coin. Utilisez-la pour créer des coins arrondis ou des éléments entièrement arrondis.
borderStyle	"" | MaybeAllValuesShorthandProperty<BoxBorderStyles>	Le style visuel de la bordure sur tous les côtés, par exemple pleine, tiretée ou pointillée. Lorsqu'il est défini, il remplace le style indiqué dans la propriété border. Prend en charge la syntaxe à 1 à 4 valeurs pour définir des styles différents par côté.
borderWidth	"" | MaybeAllValuesShorthandProperty<"base" | "small-100" | "small" | "large" | "large-100" | "none">	L'épaisseur de la bordure sur tous les côtés. Lorsqu'elle est définie, elle remplace la largeur indiquée dans la propriété border. Prend en charge la syntaxe à 1 à 4 valeurs pour définir des largeurs différentes par côté.
inlineSize	"auto" | "fill"	La largeur inline affichée de l'image. - fill : l'image occupe 100 % de la taille inline disponible. - auto : l'image est affichée à sa taille naturelle. En savoir plus sur l'attribut width.
loading	"eager" | "lazy"	La stratégie de chargement de l'image. - eager : charge l'image immédiatement, quelle que soit sa position dans le viewport visible. - lazy : retarde le chargement de l'image jusqu'à ce qu'elle approche d'une distance donnée du viewport. En savoir plus sur l'attribut loading.
objectFit	"contain" | "cover"	Le comportement de redimensionnement de l'image pour s'adapter à son conteneur. - contain : redimensionne l'image pour qu'elle tienne dans le conteneur tout en conservant ses proportions. L'image entière est visible, mais il peut rester de l'espace vide. - cover : redimensionne l'image pour qu'elle remplisse tout le conteneur tout en conservant ses proportions. L'image peut être recadrée. L'image est toujours centrée dans le conteneur. En savoir plus sur la propriété object-fit.
sizes	string	Un ensemble de conditions média et des tailles correspondantes.
src	string	La source de l'image (une URL distante ou une ressource de fichier locale). Pendant le chargement de l'image ou si aucun src n'est fourni, un placeholder est affiché.
srcSet	string	Un ensemble de sources d'image avec leurs descripteurs de largeur ou de densité de pixels. Remplace la propriété src.

Events

Event	Type
error	CustomEvent
load	CustomEvent

Écoutez-les avec des listeners de la forme @error sur <SImage>.