Display Multiple Images in One Ipython Notebook Cell

Display multiple images in one IPython Notebook cell?

Short answer:

call plt.figure() to create new figures if you want more than one in a cell:

for ima in images:
    plt.figure()
    plt.imshow(ima)

But to clarify the confusion with Image:

IPython.display.Image is for displaying Image files, not array data. If you want to display numpy arrays with Image, you have to convert them to a file-format first (easiest with PIL):

from io import BytesIO
import PIL
from IPython.display import display, Image

def display_img_array(ima):
    im = PIL.Image.fromarray(ima)
    bio = BytesIO()
    im.save(bio, format='png')
    display(Image(bio.getvalue(), format='png'))

for ima in images:
    display_img_array(ima)

A notebook illustrating both approaches.

How do I display multiple images from one cell in a Jupyter notebook

The function pyplot.imshow only writes the image to the buffer that will be shown/stored/etc in subsequent actions (this is how you can use pyplot.title, pyplot.xlim, and other commands in a sequence and then only have one plot at the end of all of them).

The reason it seems to display an image in Jupyter is because it's the last line of code executed in the cell, and Jupyter always tries to render the last item it sees unless that behavior is disabled (note that pyplot.imshow actually returns an image object which could be rendered -- Jupyter has logic in place which attempts to do so).

If you really just want to display those items in a loop (as opposed to using subplots or some other way to construct a composite image) then you need to add an additional pyplot.show() command:

from matplotlib import pyplot
file_names = ['a', 'b', 'c']
for name in file_names:
  image = cv2.imread(name)
  pyplot.imshow(image)
  pyplot.show()

Display multiple images in jupyter notebook

You can use the modules pyplot, image and then the function subplots():

# Import modules
import matplotlib.pyplot as plt
import matplotlib.image as mpimg

# Read images
img1 = mpimg.imread('myImage1.png')
img2 = mpimg.imread('myImage2.png')
img3 = mpimg.imread('myImage3.png')
img4 = mpimg.imread('myImage4.png')

# Set your canvas (fig) and the number of axes (images) you want to display
# In this example I want to display my 4 images in a grid 2x2

fig, ((ax1,ax2),(ax3,ax4)) = plt.subplots(nrows=2,ncols=2,figsize=(15,10))

ax1.imshow(img1)
ax1.set_title("Image 1")
ax2.imshow(img2)
ax2.set_title("Image 2")
ax3.imshow(img3)
ax3.set_title("Image 3")
ax4.imshow(img4)
ax4.set_title("Image 4")

plt.show()

# The same example with just the first two images in a grid 1x2

fig, (ax1,ax2) = plt.subplots(nrows=1,ncols=2,figsize=(15,10))

ax1.imshow(img1)
ax1.set_title("Image 1")
ax2.imshow(img2)
ax2.set_title("Image 2")

plt.show()

Fig is just a container of your axes.

ipython notebook read multiple images and display in CELL

In your case, you should add %matplotlib inlinebefore your code and make sure that after plt.imshow(images_list) you add plt.show() as well so matplotlib renders your images.

Loading multiple images with Ipython display in Jupyter Notebook

Have you tried using combination of Image and display?

from IPython.display import display, Image

i1 = Image("images/giraffe.png")
i2 = Image('images/monkey.png')

display(i1, i2)

display docs

How do I make 2 images appear side by side in Jupyter notebook (iPython)?

You can try using matplotlib. You can read image to numpy array by using mpimg.imread (documentation) from matplotlib, then you can use subplots (documentation) and for creating two columns for figures and finally imshow (documetation) to display images.

import matplotlib.pyplot as plt
import matplotlib.image as mpimg
from matplotlib import rcParams

%matplotlib inline

# figure size in inches optional
rcParams['figure.figsize'] = 11 ,8

# read images
img_A = mpimg.imread('\path\to\img_A.png')
img_B = mpimg.imread('\path\to\img_B.png')

# display images
fig, ax = plt.subplots(1,2)
ax[0].imshow(img_A)
ax[1].imshow(img_B)

How to display two local images side by side in jupyter?

from IPython.display import HTML, display
display(HTML("<table><tr><td><img src='/image/counts1.png'></td><td><img src='/image/counts2'></td></tr></table>"))

Set other parameters as you like.

---

Or maybe using nbextensions and splitting the cell in two (having 2 outputs side by side) would fit your needs?

how to display multiple pngs in a grid using jupyter notebook

A deeper dive, you can view in Tabs using ipywidgets as an alternative:

import os
import ipywidgets as widgets
from IPython.display import display

# Define a useful function
def get_image(f_path):
    '''
    Returns the image from a path
    '''
    img_labs = ['jpg','png']
    if any(x in img_labs for x in f_path.split('.')):
        file = os.path.join(folder,f_path)
        image = open(file,'rb').read()
        return image

# Do the actual work here
folder = 'Some Path to a Folder of Images'
files  = os.listdir(folder)
images = [get_image(x) for x in files]
children = [widgets.Image(value = img) for img in images if str(type(img)) != '<class \'NoneType\'>']
labels = ['{}'.format(i) for i in range(len(children))]

# Customize your layout here:
box_layout = widgets.Layout(
    display='flex',
    flex_flow='column',
    align_items='stretch',
    border='solid',
    width='50%')

# Create the widget
tab = widgets.Tab()
tab.children = children

# Label em'!
for i in range(len(children)):
    tab.set_title(i,labels[i])

display(tab)

For more extensive details, visit the documentation.

---

Related Topics