Versões comparadas
Chave
- Esta linha foi adicionada.
- Esta linha foi removida.
- A formatação mudou.
Função
O componente permite exibir uma imagem no formulário, podendo ser alguma imagem que esteja salva na no projeto ou alguma imagem externa em formatos *.png, *.gif (animada ou estática), *.bmp, *jpg e etc. Além disso, é possível ajustar sua posição, podendo ser no centro, na esquerda ou na direita desse formulário e, como também, pode estilizar através do CSS.
Image Modified
Figura 1 - Exemplo do componente rodando no browser
Principais propriedades
Na tabela abaixo estão descritas as principais propriedades (Figura 2) para o funcionamento básico do componente.
Nome | Propriedade | Função |
---|
Classes CSS
class
Adiciona classes CSS já criadas.
Exibir
Propriedade AngularJS usada para exibir ou oculta o componente.
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 para informar o endereço da imagem, podendo ser um endereço dentro do projeto ou uma url externa. |
Posição | 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. |
Alinhamento | align | Alinha a imagem |
Carregamento | loading | Altera o tipo de carregamento |
Classes CSS | class | Adiciona classes CSS já criadas. |
Estilo | style | Altera o estilo geral do componente da forma inline. |
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. |
Aba de Estilos
Na tabela abaixo está descrito o tipo de estilo disponível para o componente Imagem.
Nome em português | Nome em inglês | Descrição |
---|---|---|
Imagem | Image | Estiliza a div da imagem do componente. |
Informações |
---|
Algumas propriedades dos estilos listados do componente Imagem não podem ser aplicados, como, por exemplo, o Plano de fundo. |
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.
Image Modified
Figura 2 - Alterando as dimensões da imagem através do CSS
Bloco de código | ||||
---|---|---|---|---|
| ||||
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:
Bloco de código | ||
---|---|---|
| ||
data:[<media type>][;base64],<data> |
Image Modified
Figura 3 - URI Schema
Nome em inglês
Image
Nesta página
Índice | ||||
---|---|---|---|---|
|
Compatibilidade
Formulário web
Equivalente mobile
Botão do Componente
Image Added
Imagem no Editor Visual
Image Added