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

时间:2015-11-11 09:37:49

标签: markdown ipython-notebook jupyter

我试图在笔记本上的一个Markdown单元格中并排插入两张图片。我这样做的方式是:

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

以便能够调整所包含图片的大小。任何人都可以提出建议吗?

谢谢,

7 个答案:

答案 0 :(得分:22)

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

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

请参阅Tables syntax

答案 1 :(得分:15)

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

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

我从这个notebook

中提出了这个想法

答案 2 :(得分:8)

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

答案 3 :(得分:6)

我没有足够的声誉来添加评论,所以我只把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>

然后它起作用。

答案 4 :(得分:1)

图片表:

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

查看:

<头>
alt alt
alt alt
alt alt

答案 5 :(得分:0)

我正在使用VSCode,具有本机降价功能,并且该解决方案在我看来适用于...

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

这是因为我需要在网站上插入很多图像。 像这样:enter image description here

因此,它可用于前两张图片,而其他两张图片均无效,= /

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

所以,我做到了,并且效果很好,就像所附图片一样:

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

它对我来说正常工作!

希望对您有所帮助!

答案 6 :(得分:0)

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

enter image description here