'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Datos
Image
Imágenes diferidas con un brillo de carga, un respaldo y una vista previa con zoom.
import { Image } from '@alea/ui';
Ejemplos
Image
Diferida, con un brillo mientras carga. Presiónala para una vista previa con zoom.
Respaldo
Cuando una imagen no puede cargar.
Responsive y rápida
srcSet y sizes eligen el archivo correcto, ratio reserva el espacio, priority carga primero la imagen del hero, y un color de relleno se funde con la imagen.
Tokens
Los tokens de diseño que usa este componente, con su valor en el tema actual. Cambia cualquiera para darle otro estilo.
Color
--alea-surface-hover…--alea-surface-raised…--alea-text-muted…
Radius
--alea-radius-lg…--alea-radius-md…--alea-radius-sm…
Type
--alea-font-family-body…--alea-font-size-sm…--alea-font-size-xs…--alea-font-weight-semibold…
Motion
--alea-motion-duration-base…--alea-motion-duration-slow…--alea-motion-duration-slower…--alea-motion-ease-out…
Other
--alea-on-media…
Props
Image props
Una imagen que carga de forma diferida, muestra un brillo mientras carga y un respaldo si falla, y abre una vista previa con zoom.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
altobligatoria | string | - | Describe la imagen; texto vacío solo cuando es decorativa. |
srcobligatoria | string | - | La URL de la imagen. |
className | string | - | Clases extra para el elemento raíz. |
fallback | ReactNode | - | Se muestra mientras carga y si falla. |
fit | "none" | "inherit" | "fill" | "initial" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "contain" | "cover" | "scale-down" | 'cover' | object-fit de CSS. Por defecto cover. |
height | string | number | - | Altura en px. |
placeholder | string | - | Una versión diminuta desenfocada (data URL o color) que se muestra hasta que carga; luego la imagen aparece gradualmente. Por defecto el brillo. |
preview | boolean | true | Abre una vista más grande con zoom al presionar. Por defecto true. |
priority | boolean | - | La imagen principal de la página (LCP): carga de inmediato con prioridad alta en lugar de forma diferida. |
radius | "sm" | "md" | "lg" | "none" | 'md' | Token de radio de las esquinas: sm, md (por defecto), lg o none. |
ratio | number | - | Ancho / alto, por ejemplo 16 / 9: reserva el espacio para que nada salte mientras carga. |
sizes | string | - | Qué tan ancha se muestra, para srcSet: "(min-width: 768px) 50vw, 100vw". |
srcSet | string | - | Fuentes responsive: "hero-640.jpg 640w, hero-1280.jpg 1280w". |
width | string | number | - | Ancho en px. |
Especificaciones
Generado desde el código: las variantes de los tipos, los estados y tokens del CSS, y los patrones de motion que aplican. Las grillas muestran el componente real en ambos temas; los números se miden en la página.
- Variantes
fitnoneinheritfillinitial-moz-initialrevertrevert-layerunsetcontaincoverscale-downradiussmmdlgnone- Estados
- PlaceholderHover (CSS)
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-image.alea-image-fallback.alea-image-button.alea-image-overlay.alea-image-dialog.alea-image-tools.alea-image-zoom.alea-image-stage- Atributos data
data-radius=smdata-radius=mddata-radius=lgdata-state=loading
Accesibilidad
- alt es obligatorio; el botón de vista previa dice qué abre.
Teclado
| Tecla | Acción |
|---|---|
| Enter | Abre la vista previa |
| + / - | Zoom en la vista previa |
| Escape | Cierra la vista previa |
Qué hacer y qué evitar
Hacer
- Escribe siempre un texto alternativo que diga lo que importa de la imagen.
- Define width y height para evitar saltos de diseño.
Evitar
- No pongas texto dentro de imágenes.
- No abras vista previa de imágenes decorativas.