Image

Apresentação

O componente Image é responsável por exibir imagens na interface, oferecendo recursos avançados como zoom com gestos (pinch zoom), carregamento otimizado e fallback para casos de erro.

Quando usar

• Para exibir imagens em qualquer parte da interface
• Quando precisar de imagens responsivas
• Para implementar zoom em imagens com gestos
• Quando precisar de carregamento otimizado de imagens
• Para exibir imagens com fallback em caso de erro

Forma básica de uso

import { Image } from 'eitri-luminus';

// Imagem básica
<Image
  src="/caminho/da/imagem.jpg"
  alt="Descrição da imagem"
  width="100%"
  height="auto"
/>

// Imagem com zoom
<Image
  src="/caminho/da/imagem.jpg"
  alt="Descrição da imagem"
  pinchZoom
  zoomMaxScale={3}
/>

// Imagem com carregamento otimizado
<Image
  src="/caminho/da/imagem.jpg"
  alt="Descrição da imagem"
  loading="lazy"
  decoding="async"
/>

// Imagem com srcSet para diferentes resoluções
<Image
  src="/imagem-padrao.jpg"
  srcSet="/imagem-pequena.jpg 300w, /imagem-media.jpg 600w, /imagem-grande.jpg 900w"
  sizes="(max-width: 300px) 300px, (max-width: 600px) 600px, 900px"
  alt="Imagem responsiva"
/>

Propriedades

Propriedade	Tipo	Descrição
src	string	URL da imagem
alt	string	Texto alternativo para acessibilidade
loading	'eager' | 'lazy'	Estratégia de carregamento da imagem
decoding	'sync' | 'async'	Estratégia de decodificação da imagem
width	string | number	Largura da imagem
height	string | number	Altura da imagem
title	string	Título da imagem (tooltip)
srcSet	string	Conjunto de imagens para diferentes resoluções
sizes	string	Tamanhos das imagens para diferentes viewports
onLoad	() => void	Função chamada quando a imagem é carregada
pinchZoom	boolean	Habilita zoom com gestos (pinch)
zoomMaxScale	number	Escala máxima do zoom (padrão: 2)
zoomMaxTranslate	number	Distância máxima de translação do zoom (padrão: 100)

Heranças

O componente Image herda todas as propriedades comuns da biblioteca através da interface CommonProps, que inclui:

• Propriedades de estilo (margin, padding, etc)
• Propriedades de layout (flex, grid, etc)
• Propriedades de posicionamento
• Propriedades de acessibilidade
• Propriedades de identificação (id, data-e)

Observações

• O componente exibe um placeholder quando a imagem não carrega
• O zoom com gestos é suportado apenas em dispositivos touch
• O carregamento lazy é recomendado para imagens abaixo da dobra
• O componente é responsivo por padrão
• Recomenda-se sempre fornecer um texto alternativo para acessibilidade
• O zoom é limitado para evitar problemas de performance
• O componente suporta imagens em diferentes formatos (JPG, PNG, WebP, etc)