如何在 Markdown for IPython Notebook (Jupyter) 中并排包含两张图片？答案

【问题标题】：How to include two pictures side by side in Markdown for IPython Notebook (Jupyter)?如何在 Markdown for IPython Notebook (Jupyter) 中并排包含两张图片？
【发布时间】：2016-02-12 09:07:35
【问题描述】：

我正在尝试在笔记本的一个 Markdown 单元格中并排插入两张图片。我的做法是：

<img src="pic/scan_concept.png" alt="Drawing" style="width: 250px;"/>

为了能够调整包含图片的大小。任何人都可以在此基础上提出建议吗？

谢谢，

【问题讨论】：

标签： python jupyter-notebook markdown jupyter

【解决方案1】：

图片表：

|![alt](pathToImage1.jpg) |![alt](pathToImage2.jpg)|
|-|-|
|![alt](pathToImage3.jpg) | ![alt](pathToImage4.jpg)
|![alt](pathToImage5.jpg) | ![alt](pathToImage6.jpg)

查看：

【讨论】：

这在使用 RISE 创建的基于 jupyter notebook 的幻灯片中非常有效

【解决方案2】：

<table><tr>
<td> 
  <p align="center" style="padding: 10px">
    <img alt="Forwarding" src="images/IMG_20201012_183152_(2).jpg" width="320">
    <br>
    <em style="color: grey">Forwarding (Anahtarlama)</em>
  </p> 
</td>
<td> 
  <p align="center">
    <img alt="Routing" src="images/IMG_20201012_183158_(2).jpg" width="515">
    <br>
    <em style="color: grey">Routing (yönlendirme)</em>
  </p> 
</td>
</tr></table>

【讨论】：

【解决方案3】：

我正在使用带有本机降价的 VSCode，并且该解决方案对我来说很有效......

![alt](yourimg1.jpg) | ![alt](yourimg2.jpg)

因为我需要在我的网站上插入很多图片。像这样：

所以，它适用于前两张图片和其他图片，它不起作用 =/

我发现我需要在图片标签之间添加一些空格

所以，我做了这个并且工作正常，就像附图一样：

![alt](yourimg1.jpg) | ![alt](yourimg2.jpg)
// space 1
// space 2
// space 3
![alt](yourimg1.jpg) | ![alt](yourimg2.jpg)
// space 1
// space 2
// space 3

它对我来说很好用！

希望对你有所帮助！

【讨论】：

【解决方案4】：

我没有足够的声誉来添加 cmets，所以我将把我的 2 美分作为单独的答案。我还发现 JMann 的解决方案不起作用，但如果你用表格标签包装他的实现：

<table><tr>
<td> <img src="Nordic_trails.jpg" alt="Drawing" style="width: 250px;"/> </td>
<td> <img src="Nordic_trails.jpg" alt="Drawing" style="width: 250px;"/> </td>
</tr></table>

然后就可以了。

【讨论】：

这对我使用 jupyter notebook 有用（故意使用 html 而不是 [img](url) ）

【解决方案5】：

您可以像这样使用管道和破折号创建表格。

A | B
- | - 
![alt](yourimg1.jpg) | ![alt](yourimg2.jpg)

见Tables syntax

【讨论】：

遗憾地在 Github 上失败了。
在 Github 上工作。

【解决方案6】：

JMann 的解决方案对我不起作用。但是这个有效

from IPython.display import HTML, display
display(HTML("<table><tr><td><img src='img1'></td><td><img src='img2'></td></tr></table>"))

我从这个notebook得到这个想法

【讨论】：

原始 HTML 代码对我有用，即没有 HTML 和 display

【解决方案7】：

我在 Markdown 单元格中发现了以下作品：

    <tr>
    <td> <img src="Nordic_trails.jpg" alt="Drawing" style="width: 250px;"/> </td>
    <td> <img src="Nordic_trails.jpg" alt="Drawing" style="width: 250px;"/> </td>
    </tr>

【讨论】：