Pular para o conteúdo principal

Image​

Componente Image

📘 Modo de Uso​

O Image deve ser utilizado sempre que houver necessidade de incorporar elementos visuais na interface. É comumente usado para ilustrar conteúdos, representar fotos de perfil ou adicionar elementos decorativos.

🧩 Anatomia​

Anatomia do componente Image

📋 Propriedades​

Propriedades do componente Image

⌨️ Código​

opl.dataDisplay.component.image

🎨 Variantes​

Type​

Variações de tipo do componente Image

Tamanhos​

Variações de tamanho do componente Image

Transparency​

Variações de transparência do componente Image

🛡️ Boas Práticas e Acessibilidade​

  • Evite texto em imagens, pois não são acessíveis e não redimensionam bem. Prefira sempre texto real para informações importantes.
  • Não utilize imagens em movimento que pisquem mais de três vezes por segundo.
  • Use texto alternativo (alt) para descrever a imagem, especialmente quando contiver informações essenciais.
  • Para imagens complexas (ex.: diagramas), adicione descrição complementar na página ou link para uma versão detalhada.
  • Para gráficos, disponibilize os dados também em um formato acessível, como tabelas.
  • Se a imagem tiver link, o alt deve descrever o destino. Exemplo: o logotipo do Gov.pi com link para a página inicial deve ter alt="Página inicial do Gov.pi".
  • Se a imagem for meramente decorativa, mantenha o alt="" (vazio).