How to display static images in Bokeh using Div

Question

In my Bokeh server based project I have to use/add a few images that are within the Bokeh project folder. I created a static folder called "static/" within the project folder and basically my code looks like this:

  div_img_html = "<img src='static/image.png'>"
  div_img = Div(text = div_img_html)

however when running the server I get:

  404 GET /static/image.png (::1) 2.00ms

Obviously Bokeh gets the Div command however server doesn't know how to retrieve the actual file.... The actual file certainly is residing within that folder.

Thank you in advance for any suggestions and hopefully for a solution!

Answer 1

For directory format apps, static subdirectories are per-app. That is, the static route is relative to app (and any --prefix as well). E.g. for an app in a directory myapp:

bokeh serve --show myapp

that has contains static/image.png, then the correct code would be

from bokeh.models import Div
from bokeh.io import curdoc

div = Div(text="<img src='myapp/static/foo.png'>")

curdoc().add_root(div)

It's possible some kind of template option could be added to provide this path more easily. I'd encourage you to file a feature request on the GitHub issue tracker.