Display base64 image inside bokeh figure

Community Support
1

Hi,

I would like to display several base64 inside a bokeh figure.
But I really don’t know how to proceed.
Let’s say I have a small red bullet image:

im = 'iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=='

To display it inside my notebook I use:

from IPython import display
display.HTML(f'<img src="data:image/png;base64,{im}" />')

Now I want to draw this image inside a bokeh figure.
For instance I want to draw 5 img inside a bokeh figure randomly?
Like this

Capture d’écran 2021-07-05 à 15.35.35
Capture d’écran 2021-07-05 à 15.35.35588×532 13.7 KB

How I should proceed ?
By advance thank you
cheers
Olivier

1 Like
2

The url property of the ImageURL glyphs (or image_url glyph method) can be a base64 data URL for an image.

1 Like
3

Yes ! it works perfectly ! thanks

from bokeh.plotting import figure, show, output_file
import base64
im = 'iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=='
url = 'data:image/png;base64,'+im 
p = figure(x_range=(0,500), y_range=(0,500))
p.image_url( url=[url], x=300, y=300,w=100,h=100)
show(p)
1 Like