Insert an image in Div

Hello,

I am trying to insert images in Bokeh through a Div in order to see the seemingly endless possibilities of Bokeh.

I have tried the following:

  • Inside the code ‘app_test.py’:

Div(text='<img src='my_app/static/picture.png'>')

Inside the ‘my_app’ folder I have:

  • main.py

  • description.txt

  • static (inside static is: ‘picture.png’)

  • Then I go to my directory where I have ‘my_app’ and do the following:

$ bokeh serve my_app --show

But when I run it everything comes out perfect except the picture that doesn’t load. Maybe I missed a step, any idea?

Thanks.

Anything show up in your browser JS console on load?

Since the page is at /my_app already, for a relative URL I think you just want static/picture.png

Hello @gmerritt123 @Bryan

The truth is that it is quite strange because I don’t get any errors and I have tried the following options:

Div(text='<img src='my_app/static/picture.png'>')

Div(text='<img src='/static/picture.png'>')

Div(text='<img src='static/picture.png'>')

And every time, the only thing I get is this:

weird

Any idea what might be going on?

Thanks!!

  • What exact command are you using to invoke the app?
  • What is the exact directory hierarchy of files
  • What messages are in the JS console/network debugging tabs?
  • What errors are in the bokeh server console log?

What exact command are you using to invoke the application?

$ bokeh serve my_app --show

What is the exact directory hierarchy of the files?

  • my_app (folder)
    main.py (code)
    static (folder)
    • picture.png

What messages appear in the JS console/network debugging tabs?
What errors appear in the bokeh server console log?

This is the only error I can find (404…):

$ bokeh serve my_app --show
Starting Bokeh server version 2.3.3 (running on Tornado 6.0.4)
User authentication hooks NOT provided (default user enabled)
Bokeh app running at: http://localhost:5006/my_app
Starting Bokeh server with process id: 16643
WebSocket connection opened
ServerConnection created
404 GET /static/picture.png (::1) 0.51ms
WebSocket connection closed: code=1001, reason=None

Inside main.py I have defined:

title = Div(text='<img src="static/picture.png">')

Then I put title inside a column to place it on top of a figure (outside of it).

Everything else works perfectly except for the figure which is not displayed.

Thanks!!