0

How to display Base64 images in ZUL?

asked 2017-05-05 05:00:38 +0000

thany gravatar image thany
1

Hi All

I would like to display image following by QR code Image base 64 as per :

src="data:image/jpeg;base64,[xyz.......]"

How to display Base64 images in ZUL?

Please advice me.

Best regards.

delete flag offensive retag edit

2 Replies

Sort by ยป oldest newest

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

JustinFrost gravatar image JustinFrost
135 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.

link publish delete flag offensive edit

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

cor3000 gravatar image cor3000
3260 1 6
ZK Team

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

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

link publish delete flag offensive edit
Your reply
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow
3 followers

RSS

Stats

Asked: 2017-05-05 05:00:38 +0000

Seen: 48 times

Last updated: May 22

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More