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
Nome
Propriedade
Função
Origem
src
Endereço da imagem, podendo ser local ou uma url externa.
Posição
xattr-position
Define a posição do componente na tela: esquerda, centro ou direita.
Estilo
style
Define estilo (CSS) da imagem
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
CSS gerado
max-width:356px; max-height:108px;
Data URI scheme
Para obter o conteúdo de uma imagem em base64, usaremos como exemplo adicionando o componente imagem, arraste o componentes para um formulário mobile.
Selecione o componente imagem e configure o campo origem em propriedades, clicando no ícone editar expressão (destaque 1 da Figura 3): informe a URI Data schema do base64 mais o local na fonte de dados que a imagem possui uma imagem armazenada, ficando como no destaque 2 da figura abaixo, da forma abaixo, o componente imagem busca os dados em base64 da imagem e a exibe.