Permite exibir imagens nos formatos *.png, *.gif (animado ou estático), *.bmp, *jpg e outros.
Figura 1 - Exemplo de imagem rodando no Aplicativo
Principais propriedades
Nome
Propriedade
Função
Identificador
id
Atributo que especifica um ID exclusivo para o componente. Por padrão um id é gerado automaticamente e atribuído ao componente.
Imagem
src
Campo para informar o endereço da imagem, podendo ser um endereço dentro do projeto ou uma URL externa.
Obs.: para URLs externas, utilizar o endereço completo. A imagem só será renderizada se o protocolo usado for o "https".
Posição
xattr-position
Define a posição do componente na tela: esquerda, centro ou direita.
Preenchimento da imagem
object-fit
Altera o preenchimento da imagem, podendo variar entre: Proporcional, Ajustado, Preencher (padrão) ou Nenhum.
Largura
width
Altera a largura da imagem, em pixel.
Altura
height
Altera a altura da imagem, em pixel.
Valor alternativo
alt
Insere um valor alternativo ao componente.
Classes CSS
class
Adiciona classes CSS já criadas.
Estilo
style
Altera o estilo geral do componente da formainline.
Exibir
ng-show
Propriedade Angular usada para exibir ou oculta o componente.
Repetir
crn-repeat
Propriedade que seleciona uma fonte de dados contida na tela e repete o componente baseado no número de itens dessa fonte de dados.
Segurança
cronapp-security
Propriedade do Cronapp que trata as permissões de segurança da aplicação. Usado para permitir ou não edição e visualização do componente com base nos perfis selecionados.
Skin
crn-skin
Permite selecionar um skin que afetará apenas o componente selecionado.
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 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 imagem 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.