Question

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

请注意，在蛇示例中（为方便起见，下面转载的示例中的代码），图像imgs作为html网址存储在ColumnDataSource data字典中。我想尝试显示存储在本地驱动器上的图像，我怎么能这样做呢？

一些指示：

假设我总是会有一张我给出的任何名字的个人资料照片。许多人可以使用相同的名称，但get_profile_pics会照顾到这一点。
我想在jupyter笔记本中运行所有这些。
图片是.pngs，我还将这些个人资料图片保存为.npy文件，如果有帮助的话。
由于隐私问题，我不想在网上托管图片以使用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://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>
        """
    )

Answer 1

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

Answer 2

要在自定义hovertool模板中插入图片，该图片需要在某些公共URL上可用，以便您可以在模板中放入标准HTML <img>标签。如果图像是CDS中base64编码的数据URL，可能会。

散景：使用Hovertool显示图像

2 个答案: