python – 散景：使用Hovertool显示图像

我正在模仿Hovertool示例 here,其中hovertool显示蛇的图像.我自己的数据包括人名和他们的个人资料图片.我有一个所有配置文件图片的本地目录,所以每当我得到一个名称列表,names_ls,我有一个方法get_profile_pics将搜索该目录*以查找与该列表上的名称相关联的配置文件图片.

请注意,在蛇示例中(为方便起见,下面转载的示例中的代码),图像imgs作为html url存储在ColumnDataSource数据字典中.我想尝试显示存储在本地驱动器上的图像,我怎么能这样做呢？

一些指示：

>假设我将永远有一张我给出的任何名字的个人资料照片.许多人可以使用相同的名称,但get_profile_pics会处理这个问题.
>我想在一个jupyter笔记本中运行所有这些.
>图片是.pngs,我也将这些个人资料图片保存为.npy文件,如果有帮助的话.
>由于隐私问题,我不想在网络上托管图像以使用html标签进行检索.

Snakes Hovertool示例代码

source = ColumnDataSource(
        data=dict(
            x=[1,2,3,4,5],y=[2,5,8,7],desc=['A','b','C','d','E'],imgs = [
                'http://bokeh.pydata.org/static/snake.jpg','http://bokeh.pydata.org/static/snake2.png','http://bokeh.pydata.org/static/snake3D.png','http://bokeh.pydata.org/static/snake4_TheRevenge.png','http://bokeh.pydata.org/static/snakebite.jpg'
            ]
        )
    )

hover = HoverTool(
        tooltips="""
        <div>
            <div>
                <img
                    src="@imgs" height="42" alt="@imgs" width="42"
                    style="float: left; margin: 0px 15px 15px 0px;"
                    border="2"
                ></img>
            </div>
        <...other div tags for text>
        """
    )

我尝试了各种格式：作为PIL.Image图像,作为np.arrays,以及作为字节. tldr：这些都不起作用.我的代码,为了完整性：

list_of_pics_PIL = [...]
list_of_pics_np = [...]
list_of_pics_png = [...]
type(list_of_pics_PIL[0]) #PIL.Image.Image
type(list_of_pics_np[0]) #numpy.ndarray
type(list_of_pics_png[0]) #bytes

selected_pics_PIL = get_profile_pics(names_ls,list_of_pics_PIL)
selected_pics_np = get_profile_pics(names_ls,list_of_pics_np)
selected_pics_png = get_profile_pics(names_ls,list_of_pics_png)

source = ColumnDataSource(
        data=dict(
            names = list_of_names,height = person_height,pics = selected_pics_<format>
            )
       )

hover = HoverTool(
        tooltips="""
        <div>
            <div>
                <img
                    src="@pics" height="42" alt="@imgs" width="42"
                    style="float: left; margin: 0px 15px 15px 0px;"
                    border="2"
                ></img>
            </div>
        <...other div tags for text>
        """
    )