Inserting image into IPython notebook markdown

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:

![alt text](imagename.png "Title")

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.

Ah, you are probably using 0.12, aren't you? Serving local files is currently only available in master. And yes, the "notebook directory" is the directory with the notebooks (.ipynb files).

Since you're in markdown, why not use ![caption](files/image.png)?

@minrk : it doesn't work for me. I put " ", but it shows nothing. k.png is in the same folder as that of notebook file.

Please re-read the answer and comments. Your url will always start with 'files/', so if you have k.png next to your notebook, the URL would be src="files/k.png".

you have to refresh a webpage for images at a given url to be reloaded.

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:

![Venus_flytrap_taxonomy.jpg](attachment:Venus_flytrap_taxonomy.jpg)

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

If you want to display the image in a Code cell then use:

from IPython.display import Image
Image(filename='output1.png',width=800, height=400)

[Obsolete]

IPython/Jupyter now has support for an extension modules that can insert images via copy and paste or drag & drop.

https://github.com/ipython-contrib/IPython-notebook-extensions

The drag & drop extension seems to work in most browsers

https://github.com/ipython-contrib/IPython-notebook-extensions/tree/master/nbextensions/usability/dragdrop

But copy and paste only works in Chrome.

I put the IPython notebook in the same folder with the image. I use Windows. The image name is "phuong huong xac dinh.PNG".

In Markdown:

<img src="phuong huong xac dinh.PNG">

Code:

from IPython.display import Image
Image(filename='phuong huong xac dinh.PNG')

First make sure you are in markdown edit model in the ipython notebook cell

This is an alternative way to the method proposed by others <img src="myimage.png">:

![title](img/picture.png)

It also seems to work if the title is missing:

![](img/picture.png)

Note no quotations should be in the path. Not sure if this works for paths with white spaces though!

Change the default block from "Code" to "Markdown" before running this code:

![<caption>](image_filename.png)

If image file is in another folder, you can do the following:

![<caption>](folder/image_filename.png)

Last version of jupyter notebook accepts copy/paste of image natively

For those looking where to place the image file on the Jupyter machine so that it could be shown from the local file system.

I put my mypic.png into

/root/Images/mypic.png

(that is the Images folder that shows up in the Jupyter online file browser)

In that case I need to put the following line into the Markdown cell to make my pic showing in the notepad:

![My Title](Images/mypic.png)

minrk's answer is right.

However, I found that the images appeared broken in Print View (on my Windows machine running the Anaconda distribution of IPython version 0.13.2 in a Chrome browser)

The workaround for this was to use <img src="../files/image.png"> instead.

This made the image appear correctly in both Print View and the normal iPython editing view.

UPDATE: as of my upgrade to iPython v1.1.0 there is no more need for this workaround since the print view no longer exists. In fact, you must avoid this workaround since it prevents the nbconvert tool from finding the files.

I never could get "insert image" into a markdown cell to work. However, the drag and drop entered the png file saved in the same directory as my notebook. It brought this text into the cell

""

The shift + enter > image is now displayed in notebook.

FWIW

You can find your current working directory by 'pwd' command in jupyter notebook without quotes.