htmlpython-3.xipywidgetsvoila

How to display an image in a HTML widget in voila

I want to display an image in an HTML ipywidget rendered in voila. This code works in jupyter notebooks:

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

But voila does not find the static file. It is displayed as a broken image.

Solution

  • Since jupyter notebooks and voila are running on a localhost, you can use a base url. The base url has the form 'http://localhost:/notebook/'.

    Example:

    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