---
title: "Image (UiImage): imagens na interface"
version: snapshot-2026-10-06
engineGeneration: astra-current
language: C#
status: source-reviewed
runtimeVerified: false
platformEvidence: []
url: https://astraengine.com.br/pt-br/snapshot-2026-10-06/ui/image/
---

# Image (UiImage): imagens na interface

Desenha uma imagem do projeto, com transparência. Se você procura UiImage, UIImage ou UIIMG, este é o elemento Image da Astra.

## Para que serve

Desenha uma imagem do projeto, com transparência. Se você procura UiImage, UIImage ou UIIMG, este é o elemento Image da Astra.

## Onde fica

**Interface → criar elemento → Image**; ou Canvas expandido na Hierarquia → selecione um elemento → Inspector → **+ Elemento → Image**. Primeiro [crie e atribua o documento](/pt-br/snapshot-2026-10-06/ui/comece-aqui/). Este tipo é um nó de UI, não um componente do menu Adicionar componente.

## Campos e uso

Recurso do projeto, Ajuste, Tinta, Layout, Estado, Interação e Animação.

Leia [layout e campos comuns](/pt-br/snapshot-2026-10-06/ui/layout-e-campos/) para padrões, unidades, estado, fundo, âncoras e composição automática. A referência de script é [GuiElement](/pt-br/snapshot-2026-10-06/api/astra-guielement/); o tipo é **GuiKind.Image**.

## Exemplo prático

Coração, retrato, ícone ou painel ilustrado.

### Imagem: recurso, proporção e alpha

- **Recurso do projeto / Image:** caminho relativo, como **Images/heart-full.png**. Não use C:/, /sdcard/ ou URL. PNG com transparência serve para o contorno de coração. O seletor lista recursos do projeto e informa erros de decodificação/atlas.
- **Ajuste / ImageStyle.Fit:** **Esticar (Stretch)** preenche o retângulo deformando proporção; **Conter (Contain)** preserva proporção e cabe inteira (padrão); **Cobrir (Cover)** preserva proporção e recorta excedente.
- **Tinta / ImageStyle.Tint:** multiplica a cor; branco **0xFFFFFFFF** conserva a imagem (padrão). Alpha zero a torna transparente.
- **Desenhar fundo:** Image nasce com fundo transparente, bordas 24,24,224,224 (200 × 200), âncoras (0,0). Ajuste para 48 × 48 no HUD.
- **Visível:** o script pode esconder a camada cheia e deixar o coração vazio atrás. Image não tem valor de vida próprio, nem fillAmount.
- **Clicável, ações, estados e duas poses:** são opcionais; veja [interação/animação](/pt-br/snapshot-2026-10-06/ui/interacao-e-animacao/).

[Tutorial completo: HUD de corações](/pt-br/snapshot-2026-10-06/ui/hud-coracoes/).

## Limitações e roadmap

Esticar/Conter/Cobrir disponíveis; nine-slice, sprite sheet e hit mask não estão entregues.

O [roadmap por função](/pt-br/snapshot-2026-10-06/ui/roadmap/) distingue dados, autoria, imagem, entrada, layout e bindings. Esta página descreve o contrato e o uso; não afirma um novo teste no dispositivo.

## Conferência

Crie o elemento no documento, altere os campos relevantes, salve UI, atribua ao Canvas e confira no Play. Pare, reabra e confirme a autoria. Se falhar, use [diagnóstico](/pt-br/snapshot-2026-10-06/ui/diagnostico/) e mantenha a mensagem exata.