2

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.

above_c_level
  • 3,579
  • 3
  • 22
  • 37
  • Did you try providing the complete path (instead of the relative path)? – arnaud Mar 19 '20 at 08:17
  • Yes, I did try it with an absolute path in the form src="file://C:/.../static/test_image.jpg" (which is not working in jupyter notebook) – above_c_level Mar 19 '20 at 09:00
  • Make sure you find the absolute path that works on jupyter notebook, and I think it will work on voila. Not sure if you need `file://` prefix – arnaud Mar 19 '20 at 09:13
  • 1
    Thanks @Arnaud! You put me on the right track. I did not need an absolute path, but a base url. I have answered my question with your help. – above_c_level Mar 29 '20 at 15:44

1 Answers1

1

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
above_c_level
  • 3,579
  • 3
  • 22
  • 37