在bokeh.plotting中实现本地图片悬停显示的方法

Bokeh生成的是网页应用，浏览器出于安全限制，无法直接读取本地磁盘路径（如C:\snake.jpg）的文件，可通过以下几种方式适配本地图片：

方法1：利用Bokeh内置静态文件服务 #

把本地图片放到和脚本同一目录（或指定子目录），用相对路径引用，Bokeh启动服务时会自动处理静态文件访问。

示例代码 #

from bokeh.plotting import ColumnDataSource, figure, output_file, show

# 图片需与脚本同目录，或用相对路径（如'./images/snake.jpg'）
source = ColumnDataSource(data=dict(
    x=[1, 2, 3, 4, 5],
    y=[2, 5, 8, 2, 7],
    desc=['A', 'b', 'C', 'd', 'E'],
    # 用原始字符串避免转义问题，或改用双反斜杠
    imgs=[
        r'./snake.jpg',
        r'./snake2.png',
        r'./snake3D.png',
        r'./snake4_TheRevenge.png',
        r'./snakebite.jpg'
    ]))

# 配置悬停提示，插入图片
p = figure(tooltips="""
    <div>
        <div>@desc</div>
        <div><img src="@imgs" width="100" height="100"></div>
    </div>
""")

p.circle('x', 'y', size=15, source=source)

output_file('hover_local_image.html')
show(p)

运行脚本后，Bokeh会启动本地服务，悬停标记即可看到本地图片。

方法2：将图片转为Base64编码嵌入 #

把图片编码成Base64字符串，直接嵌入数据源，无需依赖外部文件，生成的HTML可独立使用。

示例代码 #

import base64
from bokeh.plotting import ColumnDataSource, figure, output_file, show

def img_to_base64(img_path):
    with open(img_path, 'rb') as f:
        # 生成可直接在HTML中使用的Base64字符串
        return f'data:image/jpeg;base64,{base64.b64encode(f.read()).decode()}'

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

p = figure(tooltips="""
    <div>
        <div>@desc</div>
        <div><img src="@imgs" width="100" height="100"></div>
    </div>
""")

p.circle('x', 'y', size=15, source=source)

output_file('hover_image_base64.html')
show(p)

此方法适合图片数量少、体积小的场景。

方法3：手动启动本地HTTP服务器 #

如果图片存放在固定目录，可启动简单HTTP服务器提供图片访问：

1. 打开命令行，进入图片所在目录，运行：

# Python 3 启动本地服务器
python -m http.server 8000

2. 在代码中用本地服务器URL引用图片：

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

保持服务器运行，再启动Bokeh脚本即可。

内容的提问来源于stack exchange，提问作者gtomer