Bokeh: display images with Hovertool

Question

I imitate the Hovertool example here , where hovertool displays snake images. My own data consists of the names of people and their profile pictures. I have a local directory of all profiles, so whenever I get a list of names, names_lsI have a method get_profile_picsthat will look for this directory * for the profile image associated with the names in this list.

Note that in the snake example (code from the example below for convenience), images imgsare saved in the ColumnDataSource dictionary dataas html URLs. I want to try to display images that are stored on my local disk, but how can I do this?

Some pointers:

• Suppose I always have a profile profile of any names that are given to me. Many people may have the same name, but get_profile_picstake care of it.
• I would like to run all this in a jupyter laptop.
• Photos are .png, and I also saved these profiles as .npy files if that helps.
• Due to privacy issues, I don’t want to post images on the network for retrieval using the html tag.

Snakes Hovertool sample code

source = ColumnDataSource(
        data=dict(
            x=[1, 2, 3, 4, 5],
            y=[2, 5, 8, 2, 7],
            desc=['A', 'b', 'C', 'd', 'E'],
            imgs = [
                'http://bokeh.pydata.org/static/snake.jpg',
                'http://bokeh.pydata.org/static/snake2.png',
                'http://bokeh.pydata.org/static/snake3D.png',
                'http://bokeh.pydata.org/static/snake4_TheRevenge.png',
                'http://bokeh.pydata.org/static/snakebite.jpg'
            ]
        )
    )

hover = HoverTool(
        tooltips="""
        <div>
            <div>
                <img
                    src="@imgs" height="42" alt="@imgs" width="42"
                    style="float: left; margin: 0px 15px 15px 0px;"
                    border="2"
                ></img>
            </div>
        <...other div tags for text>
        """
    )

I tried various formats: both PIL.Image and np.arrays images, and as bytes. TL; DR: none of these works. My code for completeness:

list_of_pics_PIL = [...]
list_of_pics_np = [...]
list_of_pics_png = [...]
type(list_of_pics_PIL[0]) #PIL.Image.Image
type(list_of_pics_np[0]) #numpy.ndarray
type(list_of_pics_png[0]) #bytes

selected_pics_PIL = get_profile_pics(names_ls, list_of_pics_PIL)
selected_pics_np = get_profile_pics(names_ls, list_of_pics_np)
selected_pics_png = get_profile_pics(names_ls, list_of_pics_png)

source = ColumnDataSource(
        data=dict(
            names = list_of_names,
            height = person_height,
            pics = selected_pics_<format>
            )
       )

hover = HoverTool(
        tooltips="""
        <div>
            <div>
                <img
                    src="@pics" height="42" alt="@imgs" width="42"
                    style="float: left; margin: 0px 15px 15px 0px;"
                    border="2"
                ></img>
            </div>
        <...other div tags for text>
        """
    )

Answer 1

replace @pics with the file: // @ pics and enjoy.