如何在 Jupyter notebook (iPython) 中并排显示 2 张图像？

Posted 2023-03-12

【中文标题】如何在 Jupyter notebook (iPython) 中并排显示 2 张图像？

【英文标题】：How do I make 2 images appear side by side in Jupyter notebook (iPython)?

【发布时间】：2018-11-06 14:41:48

【问题描述】：

我想在 iPython 中并排显示 2 个 PNG 图像。

我的代码是：

from IPython.display import Image, html, display

img_A = '\path\to\img_A.png'
img_B = '\path\to\img_B.png'

display(HTML("<table><tr><td><img src=img_A></td><td><img src=img_B></td></tr></table>"))

但它不输出图像，而是只显示 2 个图像的占位符：

我也尝试了以下方法：

s = """<table>
<tr>
<th><img src="%s"/></th>
<th><img src="%s"/></th>
</tr></table>"""%(img_A, img_B)
t=HTML(s)
display(t)

但结果是一样的：

图像肯定在路径中，因为我通过在弹出窗口中显示它们进行了验证：

plt.imshow(img_A)
plt.imshow(img_B)

它们确实出现在弹出窗口中。

如何让这 2 个图像在 iPython 中并排显示？

【问题讨论】：

不确定，但***.com/questions/33647774/… 中的解决方案会有所帮助吗？

@student 您提供的链接中接受的解决方案正是我正在尝试的，但它在代码部分不起作用 - 也许它只在降价部分起作用。

您检查浏览器控制台是否有任何错误？

@akarilimano 是的，控制台没有报错。

<img src=img_A> 不会神奇地填充变量值。你必须这样做。

【参考方案1】：

您可以尝试使用matplotlib。您可以使用 matplotlib 中的 mpimg.imread (documentation) 将图像读取到 numpy 数组，然后您可以使用 subplots (documentation) 并为图形创建两列，最后imshow (documetation) 显示图像。

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);

【讨论】：

但是我有一个问题，我在笛卡尔框架内获取图像。如何解决？

你可以这样做： # 显示图像 fig, ax = plt.subplots(1,2); ax[0].imshow(img_A); ax[0].axis('off'); ax[1].imshow(img_B); ax[1].axis('off')

【参考方案2】：

matplotlib 是一个非常好的绘图工具，但对于我只需要一种快速简便的方法来显示更多图像的情况，我发现它非常沉重和缓慢。 为了解决这个问题，我使用IPyPlot package:

import ipyplot

ipyplot.plot_images(images_list, max_images=20, img_width=150)

你会得到一个类似这样的情节：

【参考方案3】：

这个简单的解决方案对我很有效：

from IPython.display import Video, Image, HTML, display

image_path1 = "/myfolder/my_img1.jpg"
image_path2 = "/myfolder/my_img2.jpg"


HTML(f"""
    <div class="row">
            <img src=image_path1 style="width:30%"> </img>
            <img src=image_path1 style="width:53.2%"> </img>
    </div>
    """)

如果您有纵向和横向图片，我会设置不同的宽度，但这取决于图片和纵横比。

【参考方案4】：

有点晚了，但我通过 here 发现了这件事

您可以通过 Hbox 进行操作。 Hbox 是一个特殊的容器，您可以在其中添加小部件。它旨在提供一种有效的方式来布局、对齐和分配给定空间中项目之间的空间。虽然定义这么多元素只是为了显示 2 张图像有点麻烦，但您可以添加更多功能，例如滑块、下拉菜单以及按钮，使您的 Jupiter notebook 更具交互性。

import IPython.display as display
import ipywidgets as widgets

img1=open('path_to_image','rb').read()
wi1 = widgets.Image(value=img1, format='jpg', width=300, height=400)
img2=open('path_to_image','rb').read()
wi2 = widgets.Image(value=img2, format='jpg', width=300, height=400)
a=[wi1,wi2]
wid=widgets.HBox(a)
display.display(wid)

【讨论】：

上述方法最适用于 png 图像（它本质上是将图像转换为二进制，然后根据我的知识显示）。在这里找到你需要的东西 --> ***.com/questions/60640375/…