Imagem

Use o componente Imagem para apresentar informações nos seus aplicativos de maneira vívida. PocketBlocks suporta a adição de uma imagem via URL e dados codificados em base64.

URL

Arraste o componente Image para a tela ou para um Container. Clique no componente Imagem e a guia Propriedades será exibida à direita. Você pode definir o URL para exibir uma imagem.

Dados codificados em Base64

Você também pode inserir uma imagem por meio de dados codificados em base64. Certifique-se de que a fonte da imagem codificada comece com data:image/FORMATODAIMAGEM;base64, ou simplesmente data:image;base64,.

Não esqueça da vírgula no final do prefixo:

data:image/FORMATODAIMAGEM;base64, OS_DADOS_DA_SUA_IMAGEM_EM_BASE64

data:image;base64,OS_DADOS_DA_SUA_IMAGEM_EM_BASE64

Demo: carreguando e exibindo uma imagem

Um caso de uso comum para exibição de imagens base64 seria combinar um componente Upload de arquivo com um componente Imagem.

Aqui está o código JS que concatena o prefixo com os dados codificados em base64 do arquivo enviado por meio de arquivo1.value[0].

{
  {
    "data:image/jpeg;base64," + arquivo1.value[0];
  }
}

Definindo visualização de clique para uma imagem

Ative Suporte a visualização de clique na guia Propriedades para permitir que os usuários visualizem a imagem em tamanho real. Passe o mouse sobre a imagem e você verá 👁 Visualização. Então, você pode clicar para visualizar.

Definindo o estilo de uma imagem

Em Propriedades > Estilo, altere a cor da borda e defina o Raio da borda em pixels ou em porcentagem.