如何将本地图片直接嵌入Bokeh生成的独立HTML文件以实现单文件分享

直接将本地图片转成base64格式的Data URI替换原有的图片路径即可，不需要修改其他逻辑，生成的HTML文件会自带所有图片资源，单独转发即可正常显示。

实现步骤 #

• 导入base64库用于图片编码，可搭配pathlib处理本地文件路径
• 写一个通用的本地图片转Data URI的工具函数
• 用工具函数处理你要用到的所有本地图片，将返回的字符串填入原代码的imgs列表
• 其余代码保持不变，直接运行生成HTML即可

完整修改后代码示例 #

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

# 本地图片转base64的工具函数
def image_to_base64(img_path):
    suffix = Path(img_path).suffix.lower()
    # 常见图片格式对应的MIME类型，可按需扩展
    mime_map = {
        '.jpg': 'image/jpeg',
        '.jpeg': 'image/jpeg',
        '.png': 'image/png',
        '.gif': 'image/gif'
    }
    mime_type = mime_map.get(suffix, 'image/jpeg')
    with open(img_path, 'rb') as f:
        b64_content = base64.b64encode(f.read()).decode('utf-8')
    return f'data:{mime_type};base64,{b64_content}'

output_file("toolbar.html")
source = ColumnDataSource(data=dict(
    x=[1, 2, 3, 4, 5],
    y=[2, 5, 8, 2, 7],
    desc=['A', 'b', 'C', 'd', 'E'],
    # 替换成你自己的本地图片路径即可
    imgs=[
        image_to_base64('./snake.jpg'),
        image_to_base64('./snake2.png'),
        image_to_base64('./snake3D.png'),
        image_to_base64('./snake4_TheRevenge.png'),
        image_to_base64('./snakebite.jpg')
    ],
    fonts=[
        '<i>italics</i>',
        '<pre>pre</pre>',
        '<b>bold</b>',
        '<small>small</small>',
        '<del>del</del>'
    ]
))
TOOLTIPS = """
<div>
    <div>
        <img
            src="@imgs" height="42" alt="@imgs" width="42"
            style="float: left; margin: 0px 15px 15px 0px;"
            border="2"
        ></img>
    </div>
    <div>
        <span style="font-size: 17px; font-weight: bold;">@desc</span>
        <span style="font-size: 15px; color: #966;">[$index]</span>
    </div>
    <div>
        <span>@fonts{safe}</span>
    </div>
    <div>
        <span style="font-size: 15px;">Location</span>
        <span style="font-size: 10px; color: #696;">($x, $y)</span>
    </div>
</div>
"""
p = figure(width=400, height=400, tooltips=TOOLTIPS,
       title="Mouse over the dots")

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

show(p)

注意事项 #

• 该方案生成的HTML文件体积会比原来大，增量基本等于所有用到的图片的总大小，适合用在提示框里的小尺寸预览图场景
• 如果用到其他格式的图片，在mime_map里补充对应的MIME类型即可

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