Question

我正在尝试创建一个情节，当您将鼠标悬停在字形上时，它会显示来自文档的this snake example之类的图像：

如果我提供包含绝对路径的pandas数据框系列/ DataSourceColumn @images，则在使用show运行时代码可以正常工作，但是如果我提供使用当前工作目录的相对路径（subfolder_from_cwd / filename （.png）图片在使用show时不显示。我的目标是制作一个包含数据的可移植html文件，但似乎到html函数的save output_save的绝对路径不会嵌入图像，因此我需要使用相对路径。

我尝试过：

在文件夹路径中包括当前工作目录名称
将file://@images更改为@images

但是我不确定还有什么尝试。

感谢您的帮助。

def make_bokeh_plot(dataframe, title):
    def style(p):
        p.title.align = 'center'
        p.title.text_font_size = '18pt'
        p.xaxis.axis_label_text_font_size = '12pt'
        p.xaxis.major_label_text_font_size = '12pt'
        p.yaxis.axis_label_text_font_size = '12pt'
        p.yaxis.major_label_text_font_size = '12pt'

        return p



    #make a histogram, keeping the image path
    arr_df, frequencies, edges  = make_histogram_df(dataframe.score.values, bins=100)

    #Make a list of the paths indexes by histrogram index bins
    img_path_series=make_img_path_series(edges,dataframe)
    #merge it with arr_df
    arr_df["images"]=img_path_series
    print(arr_df["images"].head())

    #Make df into a bokeh friendly format 
    arr_src = ColumnDataSource(arr_df)

    # Set up the figure same as before
    p = figure(plot_width = 500, plot_height = 500, title = title,
                x_range=(0, 1),
              x_axis_label = 'Scores', y_axis_label = 'Count')

    # Add a quad glyph with source this time
    p.quad(bottom=0, top='count', left='left', right='right', source=arr_src,
           fill_color='red', line_color='black')

    # Add style to the plot
    styled_p = style(p)

    # Add a hover tool referring to the formatted columns
    hover = HoverTool(tooltips = [('Delay', '@f_interval'),
                                  ('Count', '@f_count'),
                                  ('Image', '@images')])

    # src="file://@images" height="200" alt="@imgs" width="200"
    #file://
    hover = HoverTool(tooltips ="""
            <div>
                <div>
                    <img
                        src="file://@images" alt="@imgs" 
                        style="float: left; margin: 0px 15px 15px 0px;"
                        border="2"
                    ></img>
                </div>
                <div>
                    <span style="font-size: 15px;">@f_count @f_interval</span>
                    <span style="font-size: 10px; color: #696;">($x, $y)</span>
                </div>
            """)


    # Add the hover tool to the graph
    styled_p.add_tools(hover)

    show(p)

    return p

通过bokeh serve --show script.py运行服务器时，即使使用绝对路径，图像也不会显示。同样，我尝试了各种方法将其作为服务器运行时编写相对路径。

Answer 1

这行不通。浏览器将不会从通过HTTP加载的页面加载file:// URL。为了使此工作有效，必须从真实的Web服务器提供图像文件，并通过http:// URL加载。

Answer 2

我刚遇到同一问题。对我有用的是使用相对路径（图像文件与生成的HTML在同一目录中，因此我只提供文件名）并将src="file://@images"替换为src="@images"。

使用Bokeh中的HoverTool将具有相对路径的本地图像嵌入

2 个答案: