Função

Permite exibir imagens nos formatos *.png, *.gif (animado ou estático), *.bmp, *jpg e outros.

Figura 1.1 - Exemplo de imagem rodando no Aplicativo

Principais propriedades

Estilo

É possível adicionar estilo ao componente imagem, muito útil para especificar seu tamanho, evitando que a imagem ultrapasse as dimensões da tela do dispositivo.

No exemplo abaixo, estamos definindo os valores máximos de 356 pixels de largura e 108 pixels de altura, o que alcançar primeiro, mantendo a proporção da imagem.

Figura 2 - Alterando as dimensões da imagem através do CSS

max-width:356px; max-height:108px;

Data URI scheme

Para renderizar o conteúdo de uma imagem em base64, precisamos informar o Schema de dado da URI (Schema Data URI) antes do seu valor.

Para isso, selecione o componente imagem e em Propriedades configure o campo Origem clicando no ícone Editar expressão (1 da Figura 3): informe a URI Data schema do base64 e o local na fonte de dados que possui uma imagem armazenada (2). O componente imagem busca os dados em base64 da imagem e a exibe.

O data URI Schema possui a sintaxe:

data:[<media type>][;base64],<data>

Figura 3 - URI Schema