Image

Используйте графический компонент для наглядного представления информации в ваших приложениях. Функция Apeekflow позволяет добавлять изображения с помощью URL-адреса и данных, закодированных в base64.

URL-адрес

Перетащите компонент изображения на холст или в контейнер. Щелкните компонент изображения, и справа откроется вкладка свойств. Вы можете задать URL-адрес для отображения изображения.

Данные, закодированные в Base64

Вы также можете вставить изображение с помощью данных, закодированных в base64. Убедитесь, что исходное кодированное изображение начинается с data:image/PICTURE_FORMAT;base64, или простоdata:image;base64,.

Не пропустите запятую в конце префикса:

data:image/PICTURE_FORMAT;base64,YOUR_BASE64_ENCODED_IMAGE_DATA

data:image;base64,YOUR_BASE64_ENCODED_IMAGE_DATA

Демонстрация: загрузка и отображение изображения

Одним из распространенных вариантов использования отображения изображений в base64 может быть объединение компонента загрузки файлов с компонентом изображений.

Вот JS-код, который объединяет префикс с закодированными данными base64 загруженного файла с помощьюfile1.value[0].

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

Установите предварительный просмотр по щелчку мыши для изображения

Переключите поддержку, нажав Предварительный просмотр на вкладке Свойства, чтобы пользователи могли просматривать изображение в полном размере. Наведите указатель мыши на изображение, и вы увидите Предварительный просмотр. Затем вы можете нажать Предварительный просмотр.

Установите стиль изображения

В меню Свойства > Стиль измените цвет границы и задайте радиус границы в пикселях или в процентах.