1

I have referenced this question many times regarding how to render linked images in pandas data frame

And it is quite easy to implement. However, I have come across a scenario where I would like to render a local image in my current working directory in a pandas dataframe. I figured I could just replace the image link(s) in the snippet below (credit to @chitown88 with this code from the linked question) with the image path, but that doesn't appear to work.

import pandas as pd
from IPython.core.display import display,HTML

df = pd.DataFrame([['A231', 'Book', 5, 3, 150], 
                   ['M441', 'Magic Staff', 10, 7, 200]],
                   columns = ['Code', 'Name', 'Price', 'Net', 'Sales'])

# your images
images1 = ['https://vignette.wikia.nocookie.net/2007scape/images/7/7a/Mage%27s_book_detail.png/revision/latest?cb=20180310083825',
          'https://i.pinimg.com/originals/d9/5c/9b/d95c9ba809aa9dd4cb519a225af40f2b.png'] 


images2 = ['https://static3.srcdn.com/wordpress/wp-content/uploads/2020/07/Quidditch.jpg?q=50&fit=crop&w=960&h=500&dpr=1.5',
           'https://specials-images.forbesimg.com/imageserve/5e160edc9318b800069388e8/960x0.jpg?fit=scale']

df['imageUrls'] = images1
df['otherImageUrls'] = images2


# convert your links to html tags 
def path_to_image_html(path):
    return '<img src="'+ path + '" width="60" >'

pd.set_option('display.max_colwidth', None)

image_cols = ['imageUrls', 'otherImageUrls']  #<- define which columns will be used to convert to html

# Create the dictionariy to be passed as formatters
format_dict = {}
for image_col in image_cols:
    format_dict[image_col] = path_to_image_html


display(HTML(df.to_html(escape=False ,formatters=format_dict)))

There has to be a rather easy way to accomplish this I would think. I also tried using PIL to open the image first but to no avail.

bismo
  • 1,257
  • 1
  • 16
  • 36
  • Okay, so, for rendering purposes the Dataframe is being represented **in HTML**. So the question is what needs to go in the HTML document source, in order for the local image to appear. Did you try using a `file:///` url? I don't think this is really a question about Pandas or Python at all, but a question about HTML. – Karl Knechtel Sep 01 '22 at 20:56
  • I just tried `file:///assets/images/my_img.png` but it did not render correctly @KarlKnechtel – bismo Sep 01 '22 at 20:59
  • What rendered instead? (Hint: `file` URLs are going to require an absolute path. How should *the HTML renderer, e.g. a web browser* know anything about the CWD of your Python program?) – Karl Knechtel Sep 01 '22 at 20:59
  • A default html image icon with a cloud and a green hill @KarlKnechtel – bismo Sep 01 '22 at 21:00

1 Answers1

0

If I export the dataframe to an HTML file which is in the same directory as another directory called pic_dir, which includes two files: pic.png, pic2.png, this simple solution seems to work (I see the pictures rendered in the HTML table).

import pandas as pd
from IPython.core.display import display,HTML

df = pd.DataFrame([['A231', 'Book', 5, 3, 150],
                   ['M441', 'Magic Staff', 10, 7, 200]],
                   columns = ['Code', 'Name', 'Price', 'Net', 'Sales'])

# your images
images1 = ['pic_dir/pic.png',
           'pic_dir/pic2.png']


images2 = ['pic_dir/pic.png',
           'pic_dir/pic2.png']

df['imageUrls'] = images1
df['otherImageUrls'] = images2


# convert your links to html tags
def path_to_image_html(path):
    return '<img src="' + path + '" width="60" >'

pd.set_option('display.max_colwidth', None)

image_cols = ['imageUrls', 'otherImageUrls']  #<- define which columns will be used to convert to html

# Create the dictionariy to be passed as formatters
format_dict = {}
for image_col in image_cols:
    format_dict[image_col] = path_to_image_html

df.to_html('df.html', escape=False ,formatters=format_dict)
erap129
  • 910
  • 1
  • 8
  • 17