Image

Muestra imágenes con soporte de vista previa y respaldo.

Importar

import { Image } from 'asterui'

Ejemplos

Imagen Básica

Visualización simple de imagen con props src y alt.

</>

import { Image } from 'asterui'

function App() {
  return (
      <Image
        src="/valley.png"
        alt="Landscape"
        width={400}
        height={300}
      />
    )
}

export default App

Diferentes Tamaños

Imágenes con varias dimensiones.

</>

import { Image, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" size="md" align="center">
        <Image
          src="/valley.png"
          alt="Small"
          width={100}
          height={100}
        />
        <Image
          src="/valley.png"
          alt="Medium"
          width={200}
          height={150}
        />
        <Image
          src="/valley.png"
          alt="Large"
          width={300}
          height={200}
        />
      </Space>
    )
}

export default App

Vista Previa de Imagen

Haz clic en la imagen para previsualizar en tamaño completo.

</>

import { Image } from 'asterui'

function App() {
  return (
      <Image
        src="/valley.png"
        alt="Landscape with preview"
        width={400}
        height={300}
        preview
      />
    )
}

export default App

Imagen de Respaldo

Muestra imagen de respaldo cuando falla la carga de la fuente.

</>

import { Image, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" size="md">
        <Image
          src="/does-not-exist.png"
          alt="Broken image"
          width={200}
          height={150}
          fallback="/valley.png"
        />
      </Space>
    )
}

export default App

API

Image

Propiedad	Descripción	Tipo	Predeterminado
src	URL de fuente de imagen	string	-
alt	Texto alternativo para la imagen	string	''
width	Ancho de imagen	number | string	-
height	Altura de imagen	number | string	-
preview	Habilita clic para previsualizar imagen en lightbox	boolean	true
fallback	URL de imagen de respaldo cuando falla la carga de la fuente	string	-
placeholder	Contenido de marcador de posición mostrado durante la carga	React.ReactNode	-
onLoad	Callback cuando la imagen se carga exitosamente	() => void	-
onError	Callback cuando falla la carga de la imagen	() => void	-
className	Clases CSS adicionales	string	-
style	Estilos en línea	React.CSSProperties	-

Accesibilidad

• Siempre proporciona texto alt significativo para lectores de pantalla
• Usa imágenes de respaldo para asegurar que el contenido siempre sea visible
• La vista previa es accesible por teclado: presiona Enter o Espacio para abrir, Escape para cerrar
• Las imágenes previsualizables tienen role="button" con aria-label apropiado
• El modal de vista previa tiene role="dialog" y aria-modal="true"
• El estado de error incluye aria-label describiendo el fallo