Image
Image dibuja una textura con esquinas redondeadas por SDF. Las texturas tienen un cache compartido, y un Glass encima la captura y la refracta.
Uso
<Image src="/photo.jpg" alt="Una foto" width={300} height={400} radius={16} />La imagen se estira al tamaño del quad: no recorta como object-fit. Recortá el archivo a la proporción que vas a dibujar.
Accesibilidad
Con alt, la imagen suma un elemento real e invisible en la capa del bridge, para los lectores de pantalla. Sin alt, o con alt="", es decorativa y no genera DOM.
Referencia de props
| Prop | Tipo | Default | Rango | Descripción |
|---|---|---|---|---|
src | string | requerido | | URL de la imagen. Puede ser una ruta relativa, absoluta o import de Vite. |
width | number | requerido | | |
height | number | requerido | | |
radius | number | 0 | | Radio de esquinas en píxeles. |
opacity | number | 1 | 0..1 | Opacidad global. |
softness | number | 1.5 | | Suavidad del borde AA en píxeles. |
alt | string | undefined | | Texto alternativo. Shadow Layer de runtime (opt-in): con un alt no vacío, la imagen también existe como un elemento role="img" invisible en la capa del bridge, proyectado sobre el quad, que es lo que anuncia un lector de pantalla. Sin alt o con alt="" es decorativa y no genera DOM. |
x | number | — | | |
y | number | — | | |
z | number | — | |