Image
Utilisation
Le composant image est un composant technique qui facilite l'utilisation de la balise img HTML. Pour obtenir des recommandations d'utilisation, reportez-vous aux documents W3C.
Code
<Image src="path/to/image" />
Instruction d'importation
import { Image } from '@jutro/components';
Cahier des charges du composant
Assurez-vous de comprendre la surface de l'API des composants du système de conception, ainsi que les implications et les compromis. Pour en savoir plus, reportez-vous à notre introduction à l'API des composants.
Propriétés
srcobligatoire- Type
stringDescriptionSpecifies the URL of the image.
alt- TypeDescription
Specifies an alternate text for the image.
className- Type
stringDescriptionCSS class name for this component.
containerClassName- Type
stringDescriptionClass name for the containing figure node.
figcaption- TypeDescription
The caption for the figure.
onError- Type
funcDescriptionScript to be run when an error occurs when the image is being loaded.
onLoad- Type
funcDescriptionScript to be run when the image is loaded successfully.
showLoader- Type
booleanDescriptionShow a loader animation when the image is still loading.
Valeur par défauttrue sizes- Type
stringDescriptionHTML <img> srcset attribute. See here for more info.
srcSet- Type
stringDescriptionHTML <img> srcset attribute. See here for more info.
width- Type
numberDescriptionSpecifies the width of the image.
Crochets
Aucun crochet n'est disponible pour image.
Clés de traduction
Il n'existe aucune traduction pour image.
Pour en savoir plus sur la gestion des traductions, reportez-vous à notre section sur l'internationalisation.
Portes de sortie
Pour en savoir plus, reportez-vous à notre documentation sur les portes de sortie.
Exemples
Consultez la section Utilisation pour découvrir comment concevoir correctement un composant image et connaître les différentes options de configuration que nous proposons.
Exemple d’image de base
Le composant image rend la balise <img> HTML disponible dans Jutro, y compris i18n et les métadonnées, et l'enveloppe dans un élément <figure>.
<Image src="path/to/image" />
Exemple de légende
La propriété figcaption peut être utilisée pour ajouter une légende à <figure>.
<Image
src="path/to/image"
figcaption="This is a sample caption"
/>