html - 瞧，如何在 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 在 localhost 上运行，您可以使用基本 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