如何在Jupyter笔记本（iPython）中使2张图像并排显示？

Question

我希望在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)

它们会出现在弹出窗口中。

我该如何使两个图像在iPython中并排显示？

- Kristada673

---

不确定，但是这个https://dev59.com/D1wX5IYBdhLWcg3wlgTl的解决方案是否有帮助？ - niraj

@student 你提供的链接中被接受的解决方案正是我所尝试的，但它在代码部分无法工作 - 可能只适用于 markdown 部分。 - Kristada673

<img src=img_A> 不会自动填充变量值，您需要手动填写。 - Klaus D.

这回答解决了你的问题吗？如何在Markdown中将两张图片并排显示在IPython Notebook（Jupyter）中？ - Lerner Zhang

令人难以置信的是，经过这么多年，一些“漂亮的显示图像”方法仍未被实现。 - Antonio Sesto

Answer 1

你可以尝试使用 matplotlib。你可以通过使用 mpimg.imread (文档) 从matplotlib中读取图像并将其转换为 numpy 数组，然后你可以使用 subplots (文档) 创建两列用于显示图片，并最终使用 imshow (文档) 显示图像。

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)

- niraj

---

但是我有一个问题，我得到了一个笛卡尔坐标系内的图像。如何解决这个问题？ - pink.slash

你可以这样做：

显示图片

fig, ax = plt.subplots(1,2); ax[0].imshow(img_A); ax[0].axis('off'); ax[1].imshow(img_B); ax[1].axis('off') - SereneWizard

在我的情况下，这个解决方案不起作用：我只得到一些奇怪标记的轴。 - Antonio Sesto

Answer 2

matplotlib是绘图的很好工具，但我发现当我需要快速简便地展示更多的图片时，它非常沉重和缓慢。
为解决这个问题，我使用了IPyPlot包：

import ipyplot

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

你会得到类似于这样的图表：

- Karol Żak

---

在我的情况下，即使路径正确并且读取图像的其他方法运行良好，仍会显示空图像。 - Antonio Sesto

我不理解语法images[labels == 'tents']，并且在谷歌上搜索也没有找到相关信息，你能解释一下它是如何工作的吗？ - Damien

@Damien 不用在意这个。你可以将图像列表作为参数传递。在这种语法情况下，我只需通过查找字符串“tents”来过滤“labels”列表，从而返回一个适当的True和False值列表，这就是我用于从我的“images”列表中选择特定图像的切片。 - Karol Żak

Answer 3

我有点晚了，但我在这里发现了这个。

您可以通过Hbox来实现这一点。 Hbox是一个特殊的容器，您可以在其中添加小部件。它旨在提供一种有效的方法，以在给定空间中布置、对齐和分配项目之间的空间。虽然为了显示两个图像而定义这么多元素有点繁琐，但您可以添加更多的功能，比如滑块、下拉菜单以及按钮，使您的Jupiter笔记本变得更加交互性。

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)

- Shreyas H.V

---

以上方法最适用于PNG图像（它基本上将图像转换为二进制，然后根据我的知识显示它）。在此处找到您需要的内容 --> https://stackoverflow.com/questions/60640375/displaying-gifs-in-jupyter-notebook-using-widgets - Shreyas H.V

Answer 4

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

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

我为不同的图片设置了不同的宽度，这取决于图片和它们的宽高比，但具体应该由您自己来决定。

- n4321d

---

将您的代码适应于图像文本对很容易。 - Lerner Zhang

Answer 5

对于一些想要将图像和文本片段并排放置的人（改编自this answer）：

import base64
from IPython.display import HTML, display
b64_img =  base64.b64encode(open('./path', 'rb').read()).decode('ascii')
txt = "sjfa;\nakd;f\nsdfa"
display(HTML(f"""
    <div class="row">
    <img style="float:left;margin-right:30px;" src="data:image/jpeg;base64,{b64_img}" width="400" height="300" />
    <div style="font-size:10px;white-space:pre;">{txt}</div>
    </div>
    """))

- Lerner Zhang

Answer 6

应该是这样的：

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={0}></td><td><img src={1}></td></tr></table>".format(image_A,img_B)))

你把变量名当成了变量本身。

- Benjamin Zhang