¿Qué es el componente Image?

El componente Image proporciona un widget de imagen estilizado con capacidades responsivas y manejo de errores. Permite controlar dimensiones, relación de aspecto y cómo la imagen se ajusta a su contenedor. Incluye soporte para diferentes relaciones de aspecto y comportamientos de ajuste.

¿Cómo se utiliza el componente Image?

Para usar el componente Image, importa la clase y configura sus propiedades:

import Image, { AspectRatio, Fit } from "@seigenta/TypesCraft/widgets/image";

// Uso básico
new Image({
    src: "ruta/a/imagen.jpg",
    alt: "Descripción de la imagen",
    height: Size.px(300),
    width: Size.percent(100)
})
          

Propiedades del componente

El componente Image acepta las siguientes propiedades:

• src: (string) - Ruta de la imagen (requerido)
• alt: (string) - Texto alternativo (requerido)
• height?: (Size) - Altura de la imagen
• width?: (Size) - Ancho de la imagen
• aspectRatio?: (AspectRatio|string) - Relación de aspecto
• objectFit?: (Fit|string) - Comportamiento de ajuste
• id?: (string) - Identificador único
• key?: (any) - Clave para reconciliación

Ejemplos de uso

Ejemplo básico con dimensiones fijas:

new Image({
    src: "logo.png",
    alt: "Logo de la empresa",
    height: Size.px(100),
    width: Size.px(100)
})
          

Ejemplo avanzado con relación de aspecto y ajuste:

new Image({
    src: "banner.jpg",
    alt: "Banner promocional",
    width: Size.percent(100),
    aspectRatio: AspectRatio.HD,
    objectFit: Fit.Cover
})
          

Relaciones de aspecto (AspectRatio)

El enum AspectRatio proporciona relaciones predefinidas:

• Square - 1:1 (cuadrado)
• Standard - 4:3 (estándar)
• HD - 16:9 (panorámico)
• UltraWide - 21:9 (ultra ancho)

También puedes usar cadenas personalizadas como "3/2"

Comportamientos de ajuste (Fit)

El enum Fit controla cómo la imagen se ajusta al contenedor:

• Cover - Cubre todo el espacio manteniendo relación
• Contain - Ajusta manteniendo toda la imagen visible
• Fill - Estira para llenar el espacio
• None - Mantiene tamaño original
• ScaleDown - Como none o contain (el que sea más pequeño)

Manejo de errores

El componente incluye manejo de errores cuando la imagen no puede cargar:

• Muestra un fondo gris claro
• Muestra el texto "Image failed to load" centrado
• Mantiene las dimensiones especificadas