如何在IPython Notebook（Jupyter）的Markdown中将两张图片并排显示？

Question

我想在一个笔记本的Markdown单元格中并排插入两张图片。我做的方法是:

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

为了能够调整包含的图片大小，有人可以提供一些建议吗？

谢谢。

- user5224720

Answer 1

您可以使用竖线和破折号创建类似于这样的表格。

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

请查看表格语法

- user2276686

---

遗憾的是在Github上失败了。 - Markus Zeller

适用于Github。 - Krisztián Balla

Answer 2

我没有足够的声望来添加评论，所以我将我的两分钱作为独立答案发表。我也发现JMann的方法不起作用，但如果你在他的实现代码周围包裹table标签：

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

然后它就能正常工作了。

- RandomWalker

---

这对我在使用Jupyter Notebook时有效（故意使用HTML而不是[img]（url））。 - d-man

Answer 3

JMann的解决方案对我没有用。但是这个可以。

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

我从这个笔记本中得到了灵感。

- Salvador Dali

---

原始的HTML代码对我起作用了，也就是说不需要使用 HTML 和 display。 - Physbox

Answer 4

我在一个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>

- JMann

Answer 5

图片目录：

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

视图：

（说明：该内容为一个包含图片的表格。）

- Julien J

---

这在使用RISE创建的基于Jupyter Notebook的幻灯片中非常好用。 - Arthur Morris

Answer 6

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

- Hasan Tezcan

Answer 7

我正在使用VSCode，原生支持markdown语法，对于我来说这个解决方案很有效...

![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

对我来说它正常工作了！

希望能对你有所帮助！

- fabriciomasiero