How to display Base64 images in ZUL?

answered 2017-05-06 01:10:45 +0800

JustinFrost
145 ● 1 ● 6

You can just display the image as a background of a div. It depends if you are using MVC or MVVM.

MVVM

In the ViewModel:

getQrImageBackgroundImage(){
  return "background-image: url('" + qrBase64 + "');";
}

ZUL Page:

<div id="qrImage" style="@load(vm.qrImageBackgroundImage"/>

MVC

In the controller

@Wire
Div qrImage;

afterCompose{
divImage.setStyle("background-image: url('" + qrBase64 + "');");
}

ZUL Page:

<div id="qrImage" style="@load(vm.qrImageBackgroundImage"/>

You will also need some CSS to style the drImage div to the size you want.

answered 2017-05-22 07:07:04 +0800

cor3000
6280 ● 2 ● 7

updated 2017-05-22 07:07:47 +0800

I just tested it and in ZK the most obvious is just what you said...

<image src="data:image/gif;base64,..."/>

Was there a problem when you tried to set the src attribute?

Here a runnable example, also showing both zul and a java way:

http://zkfiddle.org/sample/3pm0ecg/1-base64-image-url

Robert