Menu
I have a dataframe with a column containing 495 rows of URLs. I want to display these URLs in jupyter notebook as a grid of images. The first row of the dataframe is shown here. Any help is appreciated.
id latitude longitude owner title url
23969985288 37.721238 -123.071023 7679729@N07 There she blows! https://farm5.staticflickr.com/4491/2396998528...
I have tried the following way,
from IPython.core.display import display, HTML
for index, row in data1.iterrows():
display(HTML("<img src='%s'>"%(i["url"])))
However, running of above code displays message
> TypeError Traceback (most recent call last)
<ipython-input-117-4c2081563c17> in <module>()
1 from IPython.core.display import display, HTML
2 for index, row in data1.iterrows():
----> 3 display(HTML("<img src='%s'>"%(i["url"])))
TypeError: string indices must be integers
250
Matplotlib Image grid fig - It's the parent figure for displaying images. rect - This will set the axes position as (left, bottom, width, height) tuple or as a three-digit subplot position code, it's 111 in our case. nrows_ncols - number of rows and cols, the shape of the grid, it's 2x2 in our case here.
To read the image using OpenCV I have defined load_images_from_folder function which takes a path where images are stored as an input parameter , In the next step cv2. imread function read all files in a folder and append them to images =[] list then return images list.
Your idea of using IPython.core.display with HTML is imho the best approach for that kind of task. matplotlib is super inefficient when it comes to plotting such a huge number of images (especially if you have them as URLs).
There's a small package I built based on that concept - it's called ipyplot
import ipyplot
images = data1['url'].values
labels = data1['id'].values
ipyplot.plot_images(images, labels, img_width=150)
You would get a plot similar to this:
68
The best way to show a grid of images in the Jupyter notebook is probably using matplotlib to create the grid, since you can also plot images on matplotlib axes using imshow.
I'm using a 3x165 grid, since that is 495 exactly. Feel free to mess around with that to change the dimensions of the grid.
import urllib
f, axarr = plt.subplots(3, 165)
curr_row = 0
for index, row in data1.iterrows():
# fetch the url as a file type object, then read the image
f = urllib.request.urlopen(row["url"])
a = plt.imread(f)
# find the column by taking the current index modulo 3
col = index % 3
# plot on relevant subplot
axarr[col,curr_row].imshow(a)
if col == 2:
# we have finished the current row, so increment row counter
curr_row += 1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
