Inserting image into IPython notebook markdown

Question

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?

Philipp Schwarz · Answer 1 · 2017-04-21T08:04:59.663

361

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

edited Apr 21 '17 at 08:04

answered May 05 '16 at 18:05

Philipp Schwarz

18,050
5
32
36

Curious as to how you know this command. Is it unique to Jupyter or is this some language (latex formatting, perhaps) that you are using within Jupyter to add the image? – Alex G Dec 22 '16 at 18:04
3

@ Alex G, Markdown is alanguage with plain text formatting syntax designed so that it can be converted to HTML and many other formats. Markdown is often used to create rich text using a plain text editor. Check out the following link to learn the syntax : https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet – Philipp Schwarz Jan 28 '17 at 16:32
1

@PhilippSchwarz are there some options to your example above to control the size of the 'pasted' image? Using the `` tag, such options appear approximately like this ``. – Reb.Cabin Jun 30 '17 at 14:57
2

Using this it did not work. Notebook was looking in a specific location /notebooks/ - surely this isn't root - and local path did not exist. I found it helpful to just use the notebook *insert image* - which added the image as an attachment (which is now portable). – Mark Sep 17 '17 at 12:55
2

Is there any way to use this method with image files that have space in their names? – zebralamy Dec 30 '18 at 07:34
Also looking for a way to deal with files that has space in the name/path directories. – user8491363 Mar 21 '20 at 18:13
it needs to be encoded like it is done for url. use %20 for spaces in filenames – munish Dec 24 '21 at 14:44

score 269 · Accepted Answer · edited May 28 '14 at 11:45

269

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.

edited May 28 '14 at 11:45

Pierre H.

388
1
11

answered May 17 '12 at 00:08

minrk

37,545
9
92
87

What is the "notebook directory"? Are you saying that the image should be in the same directory as the *.ipynb file? I tried this, but it didn't work. – benpro May 17 '12 at 01:29
3

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). – minrk May 17 '12 at 04:30
137

Since you're in markdown, why not use `![caption](files/image.png)`? – kynan Mar 16 '13 at 00:09
@kynan - there is no reason not to, unless you are adding shape info, etc. that markdown doesn't support. – minrk Mar 16 '13 at 04:11
4

@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. – Abid Rahman K Apr 24 '13 at 04:40
4

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"`. – minrk Apr 24 '13 at 05:04
1

Both yours and @kynan works really well. But they don't update if I change the image in the notebook dir – Norfeldt Jul 23 '13 at 10:55
2

you have to refresh a webpage for images at a given url to be reloaded. – minrk Jul 23 '13 at 15:41
2

It worked for me :). Thanks. Just a reminder that markdown code works as well: ![some text](files/image.png) works perfect too! – Alejandro Sep 04 '13 at 00:39
Where is the notebook directory? – Hamman Samuel Mar 17 '15 at 00:23
1

How can I resize the image? – an offer can't refuse May 17 '15 at 07:41
As old as this answer is, it's still the most reliable in my experience. I have run into strange behavior using the other methods (e.g. if the name of image start with a U or an x using the coding method, etc.. I can guess what's going here, but still annoying) – Michael Szczepaniak Jan 11 '18 at 23:28
1

This does not embed images in your notebook. What I mean by that is when you publish your notebook on GitHub for instance, the images are lost and the tags are displayed as text instead. This is unlike the Image method from IPython.display mentioned in the other answer. – RodrikTheReader Jul 11 '18 at 13:51

score 97 · Answer 3 · answered Apr 22 '14 at 13:23

97

I am using ipython 2.0, so just two line.

from IPython.display import Image
Image(filename='output1.png')

answered Apr 22 '14 at 13:23

Gomes

3,330
25
17

33

This is the correct way to display an image in a *code* cell. minrk's answer is the correct way to display an image in a *markdown* cell. – Mike Feb 09 '15 at 17:32
3

Using jupyter notebook 4.2.0, it doesn't show up the image unless I call `display` too: `from IPython.display import Image, display; display(Image(filename='output1.png'))` – Matteo T. Aug 02 '16 at 21:24

Rich Lysakowski PhD · Answer 4 · 2021-07-19T05:42:43.010

66

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

edited Jul 19 '21 at 05:42

answered Apr 11 '19 at 00:38

Rich Lysakowski PhD

2,702
31
44

Unfortunately this method doesn't work when Jupyter Notebook version 6.0 is hosted in Google Cloud. Anyone have a workaround that works without Admin privileges, something besides installing the drag-and-drop nbextension? – Rich Lysakowski PhD Mar 24 '20 at 04:33
2

I am even drag-dropping from local machine to my remote notebook. Thank you – BND Sep 22 '20 at 17:27
While I wasn't (like BND) able to drag a figure from my local machine into a remotely hosted notebook, I was able to do that when I was hosting locally, and moreover I confirmed that the actual image is embedded within the notebook file so you can then send the .ipynb file to others and the graphic will be preserved. The markdown cell with the graphic looks something like this in a plain text editor (image data shortened ...): { "attachments": { "download.png": { "image/png": "iVBORw0KGgoAAAAN ... U5ErkJggg==" } }, – Steve L Oct 28 '20 at 14:07
This simple "Drag-and-Drop-from-Windows-File-System" method still works fine in JupyterLab. A bug was reported for Jupyter Classic Notebook v6.x. – Rich Lysakowski PhD Mar 19 '21 at 05:04
1

I am using Jupyter Notebook 6.4.4 with Python 3.8.9 Under Windows 7 64bit Sp1, and it works fine. – 24b4Jeff Nov 24 '21 at 15:06

seralouk · Answer 5 · 2020-10-06T20:53:06.990

39

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)

edited Oct 06 '20 at 20:53

answered Mar 04 '19 at 10:14

seralouk

30,938
9
118
133

In the markdown cell, for me, works without the commas: `` – aerijman Aug 07 '19 at 19:40
it is true that commas are not needed in HTML commands. see my update – seralouk Aug 08 '19 at 06:40
This is a better solution if you want to control the size of the displayed image in your Jupyter notebook. Otherwise it can work but be a horror story. – vwvan Oct 22 '21 at 08:19

Mike · Answer 6 · 2018-10-24T06:32:36.717

27

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

edited Oct 24 '18 at 06:32

answered Oct 23 '15 at 02:59

Mike

2,637
5
29
40

2

This answer needs some upvotes. Very few know about Ipython extensions. – Thoran Apr 25 '16 at 07:04
just tried drag'n'drop in Safari and Chrome, not working for me (OSX, Py3, all updates) – K.-Michael Aye Jun 04 '16 at 01:13
2

The second link you posted is broken -- extension no longer supported? – zthomas.nc Dec 12 '17 at 19:47
I also can't find the extension anymore. – yerforkferchips May 13 '18 at 07:19
Yes, Jupyter has moved on a bit in the last three years and this answer is quite obsolete. – Mike Oct 24 '18 at 06:31

score 15 · Answer 7 · edited Oct 24 '15 at 05:11

15

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

edited Oct 24 '15 at 05:11

approxiblue

6,982
16
51
59

answered Oct 19 '15 at 13:35

hydroman

158
1
5

1

documentation reference http://ipython.readthedocs.io/en/stable/api/generated/IPython.display.html#IPython.display.Image , although using markdown ( `![alt text](foo.png "the title")` is imho preferable, unless using additional args from api is required. – michael Aug 21 '17 at 00:29

tsando · Answer 8 · 2017-05-24T15:35:18.893

15

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!

edited May 24 '17 at 15:35

answered Jul 27 '16 at 19:38

tsando

4,557
2
33
35

1

For me, images with white spaces in the name were not being rendered in the notebook. I removed the spaces, I am able to see now. – insanely_sin Nov 01 '18 at 06:38

Jade Cacho · Answer 9 · 2020-06-23T12:23:38.457

11

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)

edited Jun 23 '20 at 12:23

answered Sep 24 '19 at 15:28

Jade Cacho

691
6
9

score 10 · Answer 10 · answered Feb 01 '18 at 10:19

10

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

answered Feb 01 '18 at 10:19

Romain Jouin

4,448
3
49
79

I prefer this option, since it embeds the image in the notebook binary. It makes the notebook heavier, but you don't need to keep the image in the relative path. – Tulio Casagrande May 21 '19 at 21:21

score 4 · Answer 11 · answered Jul 29 '18 at 16:38

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)

jlarchibald · Answer 12 · 2014-02-12T18:33:21.307

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.

score 0 · Answer 13 · answered Jun 13 '21 at 16:23

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

score -4 · Answer 14 · answered Nov 13 '19 at 13:10

-4

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

answered Nov 13 '19 at 13:10

Noman Nazir

1
3

Inserting image into IPython notebook markdown

14 Answers14

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

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

Linked