Imagem
Last updated
Last updated
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.
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.
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
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]
.
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.
Em Propriedades > Estilo, altere a cor da borda e defina o Raio da borda em pixels ou em porcentagem.