O componente permite exibir uma imagem no formulário. Aceita diversos formatos: *.png, *.gif (animada ou estática), *.bmp, *jpg etc.

Figura 1 - Exemplo do componente rodando no browser

Principais propriedades

Aba de Propriedades

Na tabela abaixo estão descritas as principais propriedades (Figura 2) para o funcionamento básico do componente.

Nome	Propriedade	Função

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.
Origem	src	Campo com o caminho de uma imagem dentro da aplicação ou externa. Obs.: para URLs externas, utilizar o endereço completo. A imagem só será renderizada se o protocolo usado for o "https".
Posição da imagem	xattr-position	Define a posição da imagem através dos botões de seleção, ficando à esquerda, centro, direita ou sem alinhamento.
Preenchimento da imagem	object-fit	Altera o preenchimento da imagem.
Largura da imagem	width	Altera a largura da imagem em pixels.
Altura da imagem	height	Altera a altura da imagem em pixels.
Valor alternativo	alt	Insere um valor alternativo ao componente.
Tooltip	crn-tooltip	Permite adicionar um tooltip ao componente. Para configurá-lo, clique no botão (...) ao lado do campo. Para mais detalhes de configuração consulte a documentação Propriedades dos componentes visuais.
Alinhamento	align	Define o alinhamento da imagem, possui as opções: esquerda, direita, meio, topo e fundo.
Carregamento	loading	Define o navegador deve carregar uma imagem imediatamente ou adiar o carregamento até que algumas condições sejam atendidas. Opções: eager (imediatamente) ou lazy (aguarda uma condição).
Classes CSS	class	Adiciona classes CSS já criadas.
Estilo	style	Altera o estilo geral do componente da forma inline.
Exibir	ng-show	Propriedade Cronapp MVC 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.

Aba de Eventos

Na tabela abaixo estão descritos os eventos disponíveis para o componente.

Nome	Propriedade	Função

Nome	Propriedade	Função
Ao Clicar	ng-click	Executa uma ação quando o componente receber um clique com o mouse ou um toque na tela.
Ao Duplo Clicar	ng-dblclick	Executa uma ação quando o usuário clica duas vezes seguidas com o botão do mouse em um componente.
Ao Entrar com Mouse	ng-mouseenter	Executa uma ação quando o ponteiro do mouse é movido de fora para dentro do componente.
Ao Iniciar	ng-init	Executa uma ação assim que o componente é renderizado na tela.
Ao Mover Mouse	ng-mousemove	Executa uma ação enquanto o ponteiro do mouse está sendo movido sobre o componente.
Ao Sair com Mouse	ng-mouseleave	Executa uma ação quando o ponteiro do mouse é movido de dentro para fora do componente.

Aba de Estilos

O componente não possui propriedades específicas de estilo.

Origem

A propriedade Origem deve conter o endereço da imagem que será exibida no componente. É possível selecionar uma imagem contida na aplicação web ou a partir de uma URL externa. Para URL externa, é necessário que o endereço esteja completo e só são aceitos endereços com o protocolo "https".

O botão "..." (destaque 1 da figura 2) abre uma janela para selecionar uma imagem contida na aplicação web ou fazer upload de imagens para a aplicação. Para enviar uma imagem, clique no botão "Enviar nova" (2) e na janela que abrir, clique em "Selecionar" (3). Após escolher a imagem desejada, clique em "Ok" em ambas as janelas para efetivar a seleção da imagem no componente.

Figura 2 - Selecionando imagens

Após a adição das imagens na janela "Selecione uma imagem", elas são enviadas para a pasta assets (Localização: Mídias/Web) (destaque 1 da figura 2.1).

Figura 2.1 - Destino das imagens após inserção

Detalhes da janela de seleção de imagens:

Figura 2.2 - Janela "Selecione uma Imagem" detalhada

Campo de busca: permite pesquisar as imagens contidas na aplicação web. Pressione ENTER para confirmar o filtro.
Lista de imagens: imagens contidas na aplicação web.
Menu de contexto: menu apresentado ao clicar com o botão direito sobre a miniatura da imagem. É o mesmo menu apresentado quando clicamos com o botão direito em uma imagem na árvore de arquivos.
Pré-visualização: exibe uma prévia da imagem selecionada pelo usuário. Clique em uma das imagens na lista de imagens para exibir a prévia.
Enviar Nova: exibe a janela "Selecione o arquivo" para fazer upload de imagens.
Informações: exibe o nome, extensão e dimensões da imagem (em pixels).
Ok: confirma a escolha da imagem para inserção no componente.
Cancelar: fecha a janela e cancela a ação de inserção da imagem no componente.

Estilo

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

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 3 - 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 Esquema de dado da URI (Schema Data URI) antes do seu valor.

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:

Sintaxe

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

Figura 4 - URI Schema

Nome em inglês

Image

Nesta página

1 Principais propriedades
- 1.1 Origem
- 1.2 Estilo
- 1.3 Data URI scheme

Compatibilidade

Formulário web

Equivalente mobile

Imagem (mobile)

Botão do Componente

Imagem no Editor Visual

Assista sobre o tema no Cronapp Academy

Caso seja seu primeiro acesso ao Cronapp Academy, crie antes uma conta gratuita e matricule-se no curso abaixo.

Aula: Trabalhando com imagens