1

I'm trying to achieve the seemingly simple thing of showing a picture in a Bokeh Server.
[It works just fine for me when I do this in a Jupyter Notebook, by the way.]

My file layout is

logo.png
server_folder/
     main.py
     logo.png
     static/
         logo.png

With three logo files, just to cover all possible spots.

The code I tried so far are

p = Div(text="<img src=\"logo.png\">")
curdoc().add_root(p)

and

p = figure(x_range=(0,400), y_range=(0,400), width=400, height=400)
p.image_url(url=["logo.png"], x=0, y=400, w=400, h=400)
curdoc().add_root(p)

It does not find the logo:

(base) PS C:\some_path> bokeh serve --show server_folder
2023-02-01 14:55:07,357 Starting Bokeh server version 2.4.3 (running on Tornado 6.1)
2023-02-01 14:55:07,357 User authentication hooks NOT provided (default user enabled)
2023-02-01 14:55:07,362 Bokeh app running at: http://localhost:5006/server_folder
2023-02-01 14:55:07,362 Starting Bokeh server with process id: 8048
2023-02-01 14:55:07,957 WebSocket connection opened
2023-02-01 14:55:07,957 ServerConnection created
2023-02-01 14:55:07,962 404 GET /favicon.ico (127.0.0.1) 0.00ms
2023-02-01 14:55:07,992 404 GET /logo.png (127.0.0.1) 0.00ms
2023-02-01 14:55:08,007 404 GET /logo.png (127.0.0.1) 0.00ms

empty plot

Everything except the image is rendered just fine. In my actual full code, I have all sorts of other elements, and they work as they should.
Also note that my full code reads data from tabular files, and this also works just fine, that data is visualized in graphs as expected. It's only images which won't work.

I also tried out file://logo.png, file://c:/some_path/logo.png, http://localhost:5006/logo.png, c:/some_path/logo.png.

Given the code in one answer in How do I work with images in Bokeh (Python) (which is similar to https://discourse.bokeh.org/t/how-to-load-image-in-bokeh-app/1317?page=2) I tried

logo = "logo.png"
logo_src = ColumnDataSource(dict(url = [logo]))
p = figure(plot_width = 500, plot_height = 500, title="")
p.image_url(url='url', x=0.05, y = 0.85, h=0.7, w=0.9, source=logo_src)
curdoc().add_root(p)

which worked neither.

Is this maybe rather about settings I have to change than about the code?

I work on Windows, if that matters. My Bokeh version is 2.4.3 and I'm using Python 3.9.13. I'm executing from within the Anaconda Powershell Prompt of anaconda 1.11.0.

Aziuth
  • 3,652
  • 3
  • 18
  • 36

1 Answers1

1

Based on your layout, the url should be:

url = "server_folder/static/logo.png"

The url shouldn't be a local file in your system, but an accessible url through a browser. Based my response on this thread answer: How to load image in Bokeh App

Pablo Reyes
  • 3,073
  • 1
  • 20
  • 30
  • Thanks, that works. However, I have a follow up question - is it possible at all to access an image that is *not* located within the static folder? In my bigger picture, I have several folders with main files which were meant to share some picture folders. Including me generating pictures during the run. [Note that I'm only working on localhost - I mostly use Bokeh Server instead of a jupyter notebook because I need interactive python feedback instead of java script.] – Aziuth Feb 02 '23 at 09:38
  • For interactive load images, using Bokeh server you can use images and raster data: https://docs.bokeh.org/en/latest/docs/user_guide/topics/images.html – Pablo Reyes Feb 06 '23 at 23:28
  • The problem is, I want to show a plot in hover information. I already tried out embedding an url that leads to another server process which renders, and then hit the problem that the computations take too long for a quick mouse over effect, especially since it redoes the whole rendering process if you leave and enter the relevant spot. [Well, I guess I just hit a limit of what can be done here.] – Aziuth Feb 07 '23 at 01:08
  • Well you can still use image_url, but be sure that the urls directing to the figures that you want to show are accessible from a browser. That is more of a server configuration and permissions where you specify what folders are going to host figures to be reachable from a browser. – Pablo Reyes Feb 07 '23 at 23:05