How to use Python to build an image display app in Jupyter Notebook

3 min readDec 23, 2019

Use the python widgets library to dynamically display image from URLs in Jupyter notebook

image display app

Have you ever wondered how to display images in jupyter notebooks, using a dynamic widget app? This method will teach you to use the widgets library to display HTML Images given the image url.

For this tutorial, we will create a simple app that filters a dataframe for either soccer or basketball images based on your selection, and displays the sports images in a module. It takes the url, converts it to HTML, and feeds this into the widget.

Import packages:

from IPython.display import display, HTML
from ipywidgets import interact, interactive, fixed, interact_manual
import ipywidgets as widgets
from ipywidgets import *
import pandas as pd
pd.set_option('display.max_colwidth', -1)
import warnings
warnings.filterwarnings('ignore')
import string

*Important to note: use pd.set_option(‘display.max_colwidth’, -1) to make sure that pandas doesn’t cut off the url for long urls.

Read in a dataframe

The dataframe should be some sort of identification column, and an image url. In this case I am using soccer and basketball images. In one column, I have the image url, and in another, I have the sport name.

# read in dataframe
sports_df = pd.read_csv('~/downloads/sports.csv')
sports_df.head()

Function to convert image url:

Create a function to convert the image url to a format that the HTML library needs:

def path_to_image_html(path):
    '''
     This function essentially convert the image url to 
     '<img src="'+ path + '"/>' format. And one can put any
     formatting adjustments to control the height, aspect ratio, size etc.
     within as in the below example. 
    '''    return '<img src="'+ path + '" style=max-height:124px;"/>'

Function to display image in HTML

Create a function to convert the image text to an HTML image:

def show_im():
    CSS = """
    .output {
        flex-direction: row;
    }
    """    HTML('<style>{}</style>'.format(CSS))

Function to handle dataframe and show images

Create a function to manipulate the dataframe and display the images, to be fed into the widgets package:

def image_viewer(grid_length, grid_width, sport):
    
    images_df = sports_df[sports_df['sport'] == sport]  # filter by sport input
    image_grid = images_df['image_url']
    image_grid_size = grid_length + grid_width
    image_grid = image_grid.iloc[0:image_grid_size] # size of grid 
    image_grid = image_grid.as_matrix() #turn into matrix for reshaping
    image_grid = image_grid.reshape(grid_length, grid_width) 
    image_grid = pd.DataFrame(image_grid)
    image_grid.columns =    list(string.ascii_lowercase[:len(image_grid.columns)])    image_grid_html = HTML(image_grid.to_html(escape=False ,formatters=dict(a=path_to_image_html, 
                                                        b=path_to_image_html)))    display(image_grid_html)
    show_im()

Use widgets to display images

Finally, pass in the dataframe, grid parameters, and sport filter into the widgets package.

sport_list = ['soccer', 'basketball']  # list of sports#define widgets
display_widget = widgets.Dropdown(options=sport_list)#create tabs
tab_nest = widgets.Tab()
tab_nest.set_title(0, 'Sports Images')#interact function in isolation
f1 = interactive(image_viewer, grid_length=2, grid_width=2, sport=display_widget);tab_nest.children = [VBox(children = f1.children)]
display(tab_nest)

The final result is a module where you can select the sport, and the images of that sport are displayed in a dynamic widget:

Gif version:

For full code and input data, please see my github.

Spencer is a Data Scientist at an e-commerce company in Los Angeles and graduate from UCLA. Some of my passions are hi-fi audio, healthy living, and data science. Connect with me on LinkedIn, mentioning this story when you write.

Analytics Vidhya