如何在Voila的HTML ipywidget中显示图片？静态文件加载失败

这个问题我之前也碰到过——Jupyter Notebook里能正常显示的本地静态图片，放到Voila里就变成裂图了，核心原因是Voila的静态资源加载规则和Notebook不一样，它不会自动默认识别你自定义的static文件夹路径。下面给你几个靠谱的解决办法：

方法1：用Voila启动参数指定静态文件目录 #

启动Voila的时候，通过--static参数告诉它你的静态资源文件夹在哪里，比如你的图片放在./static目录下，就用这条命令启动：

voila --static ./static your_notebook.ipynb

这样Voila就能正确找到static/test_image.jpg的路径了，你原来的HTML代码不用改，直接就能用。

方法2：把图片转成Base64嵌入HTML（无需外部文件） #

如果不想每次启动都加参数，更稳妥的方式是把图片编码成Base64字符串直接嵌入HTML里，这样完全不依赖外部文件，Notebook和Voila都能正常显示。代码示例如下：

import ipywidgets as widgets
import base64

def image_to_base64(img_path):
    with open(img_path, "rb") as img_file:
        return base64.b64encode(img_file.read()).decode()

img_base64 = image_to_base64("static/test_image.jpg")
img_html = widgets.HTML(f'''
<div id="img" style="float:left">
    <img style="vertical-align:middle" src="data:image/jpeg;base64,{img_base64}" alt="">
</div>
''')
img_html

注意如果是PNG图片，要把data:image/jpeg改成data:image/png。

方法3：直接用ipywidgets的Image组件（更符合ipywidgets规范） #

其实ipywidgets本身就有专门的Image组件，比用HTML组件更合适，Voila会自动处理资源加载，代码更简洁：

import ipywidgets as widgets

img = widgets.Image.from_file("static/test_image.jpg")
# 可以加样式，比如设置宽度、浮动
img.layout.float = 'left'
img.layout.vertical_align = 'middle'
img

这种方式不需要手动写HTML，ipywidgets会帮你处理所有渲染细节，在Voila里也不会有路径问题。

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