How to display an image in a HTML widget in voila

user_8573336 0
Viewed 1080

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.

voila ipywidgets python-3.x html
1 Answers

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
user_85733360
Related