# Image

Use the **Image** component to present information in your apps in a vivic way. PocketBlocks supports you adding an image via URL and base64 encoded data.

## URL

Drag the **Image** component onto the canvas or into a **Container**. Click the **Image** component, and the **Properties** tab is displayed on the right. You can set the URL to display an image.

<figure><img src="https://3954266794-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdzgVkwpxTMW0dI30zZ8Y%2Fuploads%2Fgit-blob-c1a89d777a1c25e9db7c3383f008cf6d133a1634%2F01.png?alt=media" alt=""><figcaption></figcaption></figure>

## Base64 encoded data

You can also insert an image via base64 encoded data. Ensure that the encoded image source starts with `data:image/PICTURE_FORMAT;base64,` or simply`data:image;base64,`.

{% hint style="warning" %}
Don't miss the comma at the end of the prefix:

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

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

<figure><img src="https://3954266794-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdzgVkwpxTMW0dI30zZ8Y%2Fuploads%2Fgit-blob-15d74088204212f3856431e58bd13ef5378a3e06%2F02.png?alt=media" alt=""><figcaption></figcaption></figure>

### Demo: upload and display an image

One common use case for base64 image display would be combining a **File Upload** component with an **Image** component.

<figure><img src="https://3954266794-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdzgVkwpxTMW0dI30zZ8Y%2Fuploads%2Fgit-blob-b87fb138d00f2f2b1eb0e76d32f09d0259849f5f%2F03.png?alt=media" alt=""><figcaption></figcaption></figure>

Here is JS code that concatenates the prefix with the encoded base64 data of the uploaded file via `file1.value[0]`.

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

## Set click preview for an image

Toggle **Support click preview** in the **Properties** tab to allow users to preview the image in its full size. Hover your mouse over the image, and you see **👁 Preview**. Then, you can click to preview.

<figure><img src="https://3954266794-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdzgVkwpxTMW0dI30zZ8Y%2Fuploads%2Fgit-blob-981bae349627378e062905c0be29681c7e77ec2e%2F04.png?alt=media" alt=""><figcaption></figcaption></figure>

## Set the style of an image

In **Properties** > **Style**, change border color and set **Border radius** in pixels or by percentage.

<figure><img src="https://3954266794-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdzgVkwpxTMW0dI30zZ8Y%2Fuploads%2Fgit-blob-0699ab5484a4d9c9fed8c80390acb1f71d646755%2F05.png?alt=media" alt=""><figcaption></figcaption></figure>