How to include two pictures side by side in Markdown for IPython Notebook (Jupyter)?

Question

I am trying to insert two pictures side by side in one Markdown cell on a notebook. The way I do it was:

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

in order to be able to size the included picture. Can anyone gives suggestions on top of this?

Thanks,

Answer 1

You can create tables using pipes and dashes like this.

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

see Tables syntax

Answer 2

I don't have enough reputation to add comments, so I'll just put my 2 cents as a separate answer. I also found that JMann's solution didn't work, but if you wrap his implementation with table tags:

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

then it works.

Answer 3

JMann's solution didn't work for me. But this one worked

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

I took the idea from this notebook

Answer 4

Table of pictures :

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

View :

Answer 5

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

Answer 6

I'm using VSCode, with native markdown and that solution works for me in terms ...

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

Its because I need to insert a lot of images on my website. Like this:

So, it works on the first two pictures and the others, it doesn't work =/

I find that I need to add some space between image tags

So, I did this and works fine, like the attached picture:

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

And it worked properly for me!

I hope that helped you!