# 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.

<figure><img src="/files/yQfeTeox2uuMx2U6OrCH" alt=""><figcaption></figcaption></figure>

## 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,`.

{% hint style="warning" %}
Não esqueça da vírgula no final do prefixo:

<mark style="background-color:yellow;">`data:image/FORMATODAIMAGEM;base64`</mark><mark style="background-color:yellow;">**`,`**</mark> <mark style="background-color:yellow;">`OS_DADOS_DA_SUA_IMAGEM_EM_BASE64`</mark>

<mark style="background-color:yellow;">`data:image;base64`</mark><mark style="background-color:yellow;">**`,`**</mark><mark style="background-color:yellow;">`OS_DADOS_DA_SUA_IMAGEM_EM_BASE64`</mark>
{% endhint %}

<figure><img src="/files/NvOjMSXXuG673DGxy5qN" alt=""><figcaption></figcaption></figure>

### 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**.

<figure><img src="/files/omAJvNPQiVly4Em0StXt" alt=""><figcaption></figcaption></figure>

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]`.

```javascript
{
  {
    "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.

<figure><img src="/files/UwTrwzWkGBDze2QJ887U" alt=""><figcaption></figcaption></figure>

## 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.

<figure><img src="/files/7WSLMiq2tUtZkbdUIiWa" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://pocketblocks.pedroza.dev/portugues-brasil/construcao-de-aplicativos/component-guides/image.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.