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!!

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.