python - Bokeh :使用悬停工具显示图像

Question

我正在模拟 Hovertool 示例 here ，其中 hovertool 显示蛇的图像。我自己的数据包括人名和他们的头像。我有一个包含所有个人资料照片的本地目录，所以每当我获得姓名列表 names_ls 时，我都有一个方法 get_profile_pics 会在该目录*中搜索个人资料图片与该名单上的名字相关联。

请注意，在 snakes 示例中(为方便起见，下面复制了示例中的代码)图像 imgs 是如何作为 html url 存储在 ColumnDataSource data 字典中的。我想尝试显示存储在本地驱动器上的图像，我该怎么做呢？

一些提示:

1. 假设我总是有一张个人资料照片，上面写着我所取的任何名字。许多人可以有相同的名字，但 get_profile_pics 会处理这个问题。
2. 我想在 jupyter notebook 中运行所有这些。
3. 图片是 .png 格式，如果有帮助，我还将这些个人资料图片保存为 .npy 文件。
4. 由于隐私问题，我不想将图片托管在网络上以使用 html 标签进行检索。

Snakes Hovertool 示例代码

source = ColumnDataSource(
        data=dict(
            x=[1, 2, 3, 4, 5],
            y=[2, 5, 8, 2, 7],
            desc=['A', 'b', 'C', 'd', 'E'],
            imgs = [
                'http://docs.bokeh.org/static/snake.jpg',
                'http://docs.bokeh.org/static/snake2.png',
                'http://docs.bokeh.org/static/snake3D.png',
                'http://docs.bokeh.org/static/snake4_TheRevenge.png',
                'http://docs.bokeh.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>
        """
    )

Answer 1

用 file://@pics 替换 @pics 并享受。