Image

Exiba imagens com suporte para visualização e fallback.

Importação

import { Image } from 'asterui'

Exemplos

Imagem Básica

Exibição simples de imagem com props src e alt.

</>

import { Image } from 'asterui'

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

export default App

Diferentes Tamanhos

Imagens com várias dimensões.

</>

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

Visualização de Imagem

Clique na imagem para visualizar em tamanho completo.

</>

import { Image } from 'asterui'

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

export default App

Imagem Fallback

Exibir imagem fallback quando a fonte falha ao carregar.

</>

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

Propriedade	Descrição	Tipo	Padrão
src	URL da fonte da imagem	string	-
alt	Texto alternativo para a imagem	string	''
width	Largura da imagem	number | string	-
height	Altura da imagem	number | string	-
preview	Habilitar clique para visualizar imagem em lightbox	boolean	true
fallback	URL da imagem fallback quando a fonte falha ao carregar	string	-
placeholder	Conteúdo placeholder mostrado enquanto carrega	React.ReactNode	-
onLoad	Callback quando imagem carrega com sucesso	() => void	-
onError	Callback quando imagem falha ao carregar	() => void	-
className	Classes CSS adicionais	string	-
style	Estilos inline	React.CSSProperties	-

Acessibilidade

• Sempre forneça texto alt significativo para leitores de tela
• Use imagens fallback para garantir que o conteúdo esteja sempre visível
• Visualização é acessível via teclado: pressione Enter ou Space para abrir, Escape para fechar
• Imagens visualizáveis têm role="button" com aria-label apropriado
• Modal de visualização tem role="dialog" e aria-modal="true"
• Estado de erro inclui aria-label descrevendo a falha