4

I am trying to plot a png image using ImageURL class that is locally stored within the applications ./static directory. In the code below, when using a web url to the same image, it works as expected, but all attempts at creating a local url fail. Also, when running essentially the same code, outputting to file, all url cases work correctly.

bokeh serve --show

import os
import numpy as np
from bokeh.plotting import curdoc
from bokeh.models import ColumnDataSource, Range1d, Plot
from bokeh.models.glyphs import ImageURL

url= "http://pngimg.com/uploads/palm_tree/palm_tree_PNG2504.png", # works
# url= "static/palm.png", # 404 GET /static/palm.png
# url=os.path.join(os.path.dirname(__file__), 'palm.png'), # 404 GET /Volumes/Home/Code/scratch/palm.png
# url='file://'+os.path.join(os.path.dirname(__file__), 'static', 'palm.png'),
N = 1
source = ColumnDataSource(dict(
    url = [url]*N,
    x1  = np.linspace(  1, 1, N),
    y1  = np.linspace(  1, 1, N),
    w1  = np.linspace( 253,  253, N),
    h1  = np.linspace( 409,  409, N),
))
p = Plot(
    title=None, 
    x_range=Range1d(start=0, end=500), 
    y_range=Range1d(start=0, end=500), 
    plot_width=500, 
    plot_height=500,
    h_symmetry=False, 
    v_symmetry=False, 
    min_border=0, 
    toolbar_location=None
)
p.add_glyph(source, ImageURL(url="url", x="x1", y="y1", w="w1", h="h1", anchor="bottom_left"))
curdoc().add_root(p)

python main.py

from bokeh.plotting import show, output_file
output_file("tbe.html")

import os
import numpy as np
from bokeh.plotting import curdoc
from bokeh.models import ColumnDataSource, Range1d, Plot
from bokeh.models.glyphs import ImageURL
# all work
url = "http://pngimg.com/uploads/palm_tree/palm_tree_PNG2504.png", 
url = "static/palm.png",
url = os.path.join(os.path.dirname(__file__), 'static', 'palm.png'),
url ='file://'+os.path.join(os.path.dirname(__file__), 'static', 'palm.png'),
N = 1
source = ColumnDataSource(dict(
    url = [url]*N,
    x1  = np.linspace(  1, 1, N),
    y1  = np.linspace(  1, 1, N),
    w1  = np.linspace( 253,  253, N),
    h1  = np.linspace( 409,  409, N),
))
p = Plot(
    title=None, 
    x_range=Range1d(start=0, end=500), 
    y_range=Range1d(start=0, end=500), 
    plot_width=500, 
    plot_height=500,
    h_symmetry=False, 
    v_symmetry=False, 
    min_border=0, 
    toolbar_location=None
)
p.add_glyph(source, ImageURL(url="url", x="x1", y="y1", w="w1", h="h1", anchor="bottom_left"))
show(p)
papahabla
  • 1,448
  • 18
  • 18
  • check this command throwing error `url = os.path.join(os.path.dirname(__file__), 'static', 'palm.png')` as `NameError: name '__file__' is not defined ` also did you downloaded the image locally?. If it is then the`__file__` should be it directory. Check them once. @papahabla – Space Impact Mar 02 '18 at 04:45
  • @papahabla: Did you find a solution to this? I am facing the same problem... Sandeep's comment didn't help unfortunately. – Thomas Aug 09 '18 at 11:00

1 Answers1

3

As suggested in this answer, you have to start bokeh serve from the directory above your script (this means you have to rename your script to main.py). You can use then: 

url = os.path.join(os.path.basename(os.path.dirname(__file__)), "static", "palm.png")

For example:

your_folder/
  +main.py
  +static/
    +palm.png

Launch bokeh as bokeh serve your_folder --show. The resulting reachable address of the image will be http://localhost:5006/your_folder/static/palm.png

Michele
  • 2,796
  • 2
  • 21
  • 29
  • I just tried this answer on Bokeh 2.3.2 and the pngs must be in the ```static``` directory. I could not get them to load if the directory is named anything else. – Finncent Price Oct 29 '21 at 22:33