3

I want to display two images, that I have them saved locally, in one single makedown cell side-by-side? I found previous post but it uses HTML() not Image() method.

The way I tried was:

from IPython.core.display import Image, display
display(Image('/whateverfile/counts1.png',width=100,height=100), Image('/whateverfile/counts2',width=100, height=100))

But that did not work.

Any ideas how to solve this?

Thanks

MEhsan
  • 2,184
  • 9
  • 27
  • 41
  • A possible duplicate: [here](https://stackoverflow.com/questions/33647774/how-to-include-two-pictures-side-by-side-in-markdown-for-ipython-notebook-jupyt). – Mahdi Dec 04 '17 at 16:29
  • 1
    I edited the question. – MEhsan Dec 04 '17 at 16:39

1 Answers1

2
from IPython.display import HTML, display
display(HTML("<table><tr><td><img src='/image/counts1.png'></td><td><img src='/image/counts2'></td></tr></table>"))

Set other parameters as you like.

Or maybe using nbextensions and splitting the cell in two (having 2 outputs side by side) would fit your needs?

jo9k
  • 690
  • 6
  • 19
  • I could not display them. I am wondering do the images `counts1.png` and `counts2.png` have to be in a specific file in my computer? – MEhsan Dec 04 '17 at 16:46
  • Try to put them wherever folder you run your notebook in, and use paths like `src='counts1.png'`. Tell me if it works and we will work from there. – jo9k Dec 04 '17 at 16:48
  • you are amazing it worked, but not sure how! So, do I have to have the images and the jupyter notebook to be in the same folder so the HTML works? Could not I give the complete path of `counts1.png` and `count2.png` wherever they are in? – MEhsan Dec 04 '17 at 16:54
  • Path like `/image/counts1.png` is an absolute path. Are you sure you want to use an absolute path to file, not the relative one (like `./image/counts1.png`)? – jo9k Dec 04 '17 at 17:02
  • Not sure. Could you please tell me how that would differ? – MEhsan Dec 04 '17 at 17:05
  • If the image files are located in your home folder, then absolute path is `~/image/counts1.png`. If they are located in the folder inside the same folder as notebook, then relative path is the path relative to the notebook location. E.g. if notebooks are in `~/notebooks/` then file located in `~/notebooks/images/name` would have relative path like `./images/name`. More on the topic: https://stackoverflow.com/questions/21306512/difference-between-relative-path-and-absolute-path-in-javascript – jo9k Dec 04 '17 at 17:08
  • That makes a lot of sense, Thank you so much! – MEhsan Dec 04 '17 at 17:12