How to render local image in pandas dataframe

Question

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.

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
– Karl Knechtel, Commented Sep 1, 2022 at 20:56
I just tried file:///assets/images/my_img.png but it did not render correctly @KarlKnechtel — bismo
– bismo, Commented Sep 1, 2022 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
– Karl Knechtel, Commented Sep 1, 2022 at 20:59
A default html image icon with a cloud and a green hill @KarlKnechtel — bismo
– bismo, Commented Sep 1, 2022 at 21:00

erap129 · Accepted Answer · 2022-09-02 14:15:18Z

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)

Collectives™ on Stack Overflow

How to render local image in pandas dataframe

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related