> For the complete documentation index, see [llms.txt](https://pocketblocks.pedroza.dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://pocketblocks.pedroza.dev/portugues-brasil/construcao-de-aplicativos/component-guides/image.md).

# 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
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.