I am starting to depend heavily on the IPython notebook app to develop and document algorithms. It is awesome; but there is something that seems like it should be possible, but I can't figure out how to do it:
I would like to insert a local image into my (local) IPython notebook markdown to aid in documenting an algorithm. I know enough to add something like <img src="image.png"> to the markdown, but that is about as far as my knowledge goes. I assume I could put the image in the directory represented by 127.0.0.1:8888 (or some subdirectory) to be able to access it, but I can't figure out where that directory is. (I'm working on a mac.) So, is it possible to do what I'm trying to do without too much trouble?
14 Answers
Most of the answers given so far go in the wrong direction, suggesting to load additional libraries and use the code instead of markup. In Ipython/Jupyter Notebooks it is very simple. Make sure the cell is indeed in markup and to display a image use:
Further advantage compared to the other methods proposed is that you can display all common file formats including jpg, png, and gif (animations).
Files inside the notebook dir are available under a "files/" url. So if it's in the base path, it would be <img src="files/image.png">, and subdirs etc. are also available: <img src="files/subdir/image.png">, etc.
Update: starting with IPython 2.0, the files/ prefix is no longer needed (cf. release notes). So now the solution <img src="image.png"> simply works as expected.
I am using ipython 2.0, so just two line.
from IPython.display import Image
Image(filename='output1.png')
Getting an image into Jupyter NB is a much simpler operation than most people have alluded to here.
- Simply create an empty Markdown cell.
- Then drag-and-drop the image file into the empty Markdown cell.
The Markdown code that will insert the image then appears.
For example, a string shown highlighted in gray below will appear in the Jupyter cell:
- Then execute the Markdown cell by hitting Shift-Enter. The Jupyter server will then insert the image, and the image will then appear.
I am running Jupyter notebook server is: 5.7.4 with Python 3.7.0 on Windows 7.
This is so simple !!
UPDATE AS OF March 18, 2021: This simple "Drag-and-Drop-from-Windows-File-System" method still works fine in JupyterLab. JupyterLab inserts the proper HTML code to embed the image directly and permanently into the notebook so the image is stored in the .ipynb file. I am running Jupyter Lab v2.2.7 on Windows 10 Python 3.7.9 still works in JupyterLab. I am running Jupyter Lab v2.2.7 using Python 3.7.9 on Windows 10.
This stopped working in Jupyter Classic Notebook v6.1.5 sometime last year. I reported an bug notice to the Jupyter Classic Notebook developers.
It works again in the latest version of Jupyter Classic Notebook. I just tried it in v6.4 on 7/15/2021. Thank you Jupyter NB Classic Developers !!
If you want to display the image in a Markdown cell then use:
<img src="files/image.png" width="800" height="400">
