Imagen
Uso
El componente imagen es un componente técnico que facilita el uso de la etiqueta HTML img. Para obtener recomendaciones sobre el uso, consulte los documentos de W3C.
Código
<Image src="path/to/image" />
Instrucción de importación
import { Image } from '@jutro/components';
Contrato de componentes
Asegúrese de comprender la superficie de la API de componentes del sistema de diseño, así como sus implicaciones, ventajas y desventajas. Obtenga más información en nuestra introducción a la API de componentes.
Propiedades
srcobligatorio- Tipo
stringDescripciónSpecifies the URL of the image.
alt- TipoDescripción
Specifies an alternate text for the image.
className- Tipo
stringDescripciónCSS class name for this component.
containerClassName- Tipo
stringDescripciónClass name for the containing figure node.
figcaption- TipoDescripción
The caption for the figure.
onError- Tipo
funcDescripciónScript to be run when an error occurs when the image is being loaded.
onLoad- Tipo
funcDescripciónScript to be run when the image is loaded successfully.
showLoader- Tipo
booleanDescripciónShow a loader animation when the image is still loading.
Valor predeterminadotrue sizes- Tipo
stringDescripciónHTML <img> srcset attribute. See here for more info.
srcSet- Tipo
stringDescripciónHTML <img> srcset attribute. See here for more info.
width- Tipo
numberDescripciónSpecifies the width of the image.
Ganchos
No hay ganchos para Image.
Claves de traducción
No hay traducciones para Image.
Para obtener información sobre cómo gestionar las traducciones, consulte nuestra sección sobre internacionalización.
Escotillas de escape
Para obtener más información, consulte nuestra documentación sobre escotillas de escape.
Ejemplos
Consulte la sección Uso para obtener detalles sobre cómo diseñar un componente imagen correctamente y las diferentes opciones de configuración que ofrecemos.
Ejemplo de imagen básica
El componente imagen hace que la etiqueta HTML <img> esté disponible en Jutro, incluidos i18n y metadatos, y la encapsula en una <figure>.
<Image src="path/to/image" />
Ejemplo de leyenda
La propiedad figcaption se puede utilizar para agregar una leyenda a la <figure>.
<Image
src="path/to/image"
figcaption="This is a sample caption"
/>