Bokeh:用Hovertool显示图像

Question

我正在模拟Hovertool示例这里，其中悬停工具显示蛇的图像。我自己的数据包括人的名字和他们的个人资料图片。我有一个包含所有配置文件图片的本地目录，所以每当我得到一个名称列表，names_ls，我就有一个方法get_profile_pics，它将搜索该目录*中与该列表中的名称相关联的配置文件图片。

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

一些建议：

1. 假设我总是有一个个人资料的照片，我给出的任何名字。很多人都可以有相同的名字，但是get_profile_pics会处理这个问题。
2. 我想把这些都写在笔记本上。
3. 这些图片是.pngs，如果这有帮助的话，我还将这些配置文件图片保存为.npy文件。
4. 由于隐私问题，我不想在网络上托管使用html标记检索的图像。

Snakes示例代码

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

将@pics替换为file://@pics并享受。

Answer 2

要在自定义的hovertool模板中插入图像，需要在某些公共URL上提供图像，以便您可以在模板中放入标准的HTML标记。如果这些图像是CDS中的base64 64编码的数据urls，它可能会出现。