瞧，如何在 HTML 小部件中显示图像

Question

我想在 voila 中呈现的 HTML ipywidget 中显示图像。此代码适用于 jupyter 笔记本：

import ipywidgets as widget

img =  widget.HTML('<div id="img" style="float:left">'
                    '<img style="vertical-align:middle" src="static/test_image.jpg" alt="">'                       
                    '</div>')
img

但是瞧，找不到静态文件。它显示为损坏的图像。

Answer 1

由于 jupyter notebooks 和 voila 运行 在本地主机上，您可以使用基础 url。基数 url 的格式为“http://localhost:/notebook/”。

示例：

import ipywidgets as widget

img =  widget.HTML('<div id="img" style="float:left">'
                    '<img style="vertical-align:middle" src="http://localhost:8888/notebooks/static/test_image.jpg" alt="">'                       
                    '</div>')
img