PocketBlocks Docs
English
English
  • Overview
  • Installation
  • Build apps
    • Create a new app
    • App editor
    • Event handlers
    • Write JavaScript
      • Write JavaScript in {{ }}
      • JavaScript query
      • Transformers
      • Temporary state
      • Data responder
      • Built-in JavaScript functions
      • Use third-party libraries
    • Component guides
      • Option lists
      • List View
      • Drawer
      • Image
      • Charts and graphs
      • File upload
      • Custom component
      • Use Markdown
    • Module
    • Design app UI
      • Style, theme, and usability
      • Design an efficient and user-friendly form
    • Navigation
    • Keyboard shortcuts
    • Version and release management
  • Build plugins
    • Develop UI component plugins
  • Workspace management
    • Authentication
    • Members and groups
    • Permissions for resources
    • Custom branding
  • Miscellaneous
    • Where are the Data Sources/Query Library?
    • Embedding Apps
Powered by GitBook
On this page
  • URL
  • Base64 encoded data
  • Demo: upload and display an image
  • Set click preview for an image
  • Set the style of an image
  1. Build apps
  2. Component guides

Image

PreviousDrawerNextCharts and graphs

Last updated 1 year ago

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.

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 simplydata:image;base64,.

Don't miss the comma at the end of the prefix:

data:image/PICTURE_FORMAT;base64,YOUR_BASE64_ENCODED_IMAGE_DATA

data:image;base64,YOUR_BASE64_ENCODED_IMAGE_DATA

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.

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

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

Set the style of an image

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