Image into standalone HTML

Hello everybody,

I am working on a web application based on Bokeh. It is realised as standalone html. Now I have a logo for it and would like to add it to my html.

Currently, I implemented it using
~
left_logo = figure(x_range=(0,1), y_range=(0,1), width=300, height=100, toolbar_location=None, tools=’’)
left_logo.image_url(url=[‘my_logo.png’], x=0, y=1, w=1, h=1)
~

This works fine for my offline version. But it gives me trouble when I use it on GitHub. I am not sure whether this is a problem related to GitHub or Bokeh. Rather the former I guess.

I would like to know, whether there is a more elegant version to do it or possible get the logo loaded into
an html? It could potentially be interesting, to have it somehow written into the html so there would be no separate png when copying over the html somewhere.

Many thanks in advance!
Daniel

It is definitely more preferable to deal with any static content via regular HTML rather than via Bokeh. You can specify a custom template when using the save function.

But it gives me trouble when I use it on GitHub.

If you mean on the main GitHub site, then GitHub scrubs JS from things it displays, so Bokeh plots cannot function there. Unfortunately, there is nothing we can do about that.

@p-himik I think the ask is how to not have a separate PNG at all, I am not sure how a template helps with that, since an img tag would have to reference an external PNG. The image could be encoded as an RGBA numpy array and displayed with the image_rgba glyph method but the image will be large and uncompressed so the document size may be larger than desired.

@Bryan @p-himik Hi again! Thank you both for your reply. I thought of an array. I just wanted to know whether there is any smart way of doing it. It is 2 images of the size of 300 x 100. So document size will not be too bad.

@Bryan @d-que There are data URLs for that: Data URLs - HTTP | MDN
You can encode images as plain text with them.

Ah sure, we do that for Tool icons. I guess that seemed more like something libraries/frameworks would use, and less so an end product page. But yes there’s no reason that couldn’t work.