Javascript Bokeh在尝试使用CustomJS加载新图像时查看临时文件

我是Bokeh的新手，使用CustomJS定义回调。我已经编写了一个代码，根据其他滑块的值对滑块进行更改。现在我想更改其中一个滑块的值更改时显示的图像。但是，当我运行这个回调时，图像不会显示，在bokeh绘图的控制台中，我看到bokeh正在临时文件中查找某个文件

p = figure(title = 'foo', tools = 'pan, save, wheel_zoom,reset,crosshair', x_range = [0,10], y_range = [0,10])


slider1 = Slider(start=0, end=15, value=4,step=.1, title="Delta P")
slider2 = Slider(start=1400, end = 1800, value=1500, step = 10, title = "Mass Flow")

newdelta = 4
newflow = 1500
newCV = CV(4+newdelta, 4, 1.3,225.41, 0.9, newflow, 27.3,968) # CV is a function within my code elsewhere

source = ColumnDataSource(data=dict(url=['C:\\Users\\XXX\\test_sample.jpg'])) 

slider3 = Slider(start=-100, end = 2000, value=newCV, step = 1, title = "CV")
slider3.callback = CustomJS(args=dict(slider3=slider3, source=source), code="""


                                if (slider3.value < 0){
                                    source.data.url= "C:\\\\Users\\\\XXX\\\\new_sample.jpg";
                                    console.log(source.data['url']);
                                };
                                source.change.emit();

                                """)                          


p.image_url('url', source=source, x=2, y=8, w=6, h=6)


slider1.callback = CustomJS(args=dict(slider1=slider1,slider2=slider2,slider3=slider3), code="""
                            slider3.value= slider1.value + slider2.value;


                            """)

slider2.callback = CustomJS(args=dict(slider1=slider1,slider2=slider2,slider3=slider3), code="""
                            slider3.value= slider1.value + slider2.value;

                            """)

show(row(column(slider1, slider2,slider3),p))

---

有人能帮我了解出了什么问题以及如何纠正吗？

您不能直接从网页访问本地文件

解决方案1：使用

bokeh serve

并将图像数据直接放入数据源中。您必须使用

p.image\u rgba

而不是

p.image\u url

例如：

import numpy as np
from PIL import Image
from bokeh.layouts import column
from bokeh.models import Button, ColumnDataSource
from bokeh.plotting import figure, curdoc


def read_image_to_array(path):
    im = Image.open(path).convert('RGBA').transpose(Image.FLIP_TOP_BOTTOM)
    return np.asarray(im).view(np.uint32)


ds = ColumnDataSource(data=dict(image=[], x=[], y=[], dw=[], dh=[]))

p = figure()
p.image_rgba(image='image', x='x', y='y', dw='dw', dh='dw', source=ds)
b = Button(label='Set Image')


def set_image():
    path = '...'
    img = read_image_to_array(path)
    dh, dw, _ = img.shape
    ds.data = dict(image=[img], x=[0], y=[0], dw=[dw], dh=[dh])


b.on_click(set_image)

curdoc().add_root(column(p, b))

---

解决方案2：使用web服务器（甚至

python-mHTTP.server

应该足够了），并配置所有URL以通过该web服务器可用。

。能不能更详细地告诉我如何使用bokeh服务器来解决这个问题？我以前从未使用过bokeh服务器。感谢您的帮助。谢谢：）@Vijay我刚刚添加了一个例子。太棒了，尤金，谢谢你的帮助。我将尝试代码。：）

import numpy as np
from PIL import Image
from bokeh.layouts import column
from bokeh.models import Button, ColumnDataSource
from bokeh.plotting import figure, curdoc


def read_image_to_array(path):
    im = Image.open(path).convert('RGBA').transpose(Image.FLIP_TOP_BOTTOM)
    return np.asarray(im).view(np.uint32)


ds = ColumnDataSource(data=dict(image=[], x=[], y=[], dw=[], dh=[]))

p = figure()
p.image_rgba(image='image', x='x', y='y', dw='dw', dh='dw', source=ds)
b = Button(label='Set Image')


def set_image():
    path = '...'
    img = read_image_to_array(path)
    dh, dw, _ = img.shape
    ds.data = dict(image=[img], x=[0], y=[0], dw=[dw], dh=[dh])


b.on_click(set_image)

curdoc().add_root(column(p, b))