How to embed an image or picture in a Jupyter notebook, either from a local machine or from a web resource?

Question

I would like to include an image in jupyter notepad.

If I did the following, it works:

from IPython.display import Image Image("img/picture.png") 

But I would like to include the images in the markdown cell, and the following code gives a 404 error:

 ![title]("img/picture.png") 

I also tried

 ![texte]("http://localhost:8888/img/picture.png") 

But I still get the same error:

 404 GET /notebooks/%22/home/user/folder/img/picture.png%22 (127.0.0.1) 2.74ms referer=http://localhost:8888/notebooks/notebook.ipynb 

Answer 1

You should not use quotation marks around the image file name in markdowns!

If you carefully read your error message, you will see two parts of %22 in the link. This is an html encoded quote.

You have to change the line

 ![title]("img/picture.png") 

at

 ![title](img/picture.png) 

UPDATE

It is assumed that you have the following file structure and that you run the jupyter notebook command in the directory where the example.ipynb file is stored (<- contains markdown for the image):

 / +-- example.ipynb +-- img +-- picture.png 

Answer 2

There are several ways to place an image in Jupyter notebooks:

via HTML:

 from IPython.display import Image from IPython.core.display import HTML Image(url= "http://my_site.com/my_picture.jpg") 

You retain the ability to use HTML tags to resize, etc.

 Image(url= "http://my_site.com/my_picture.jpg", width=100, height=100) 

You can also display images stored locally, either by relative or by absolute path.

 PATH = "/Users/reblochonMasque/Documents/Drawings/" Image(filename = PATH + "My_picture.jpg", width=100, height=100) 

if the image is wider than the display settings: thanks

use unconfined=True to disable unconfined=True maximum image width

 from IPython.core.display import Image, display display(Image('https://i.ytimg.com/vi/j22DmsZEv30/maxresdefault.jpg', width=1900, unconfined=True)) 

or through markdown:

(make sure the cell is a markdown cell, not a code cell, thanks @ 游 凯 超 in the comments)

for web image:

 ![Image of Yaktocat](https://octodex.github.com/images/yaktocat.png) 

as shown by @cristianmtr Note that you do not use either the quotation mark "" or the one around the URL.

or local:

 ![title](img/picture.png) 

demonstrated by @Sebastian

Answer 3

Alternatively, you can use simple HTML <img src> , which allows you to change the height and width and is still read by the markdown interpreter:

 <img src="subdirectory/MyImage.png",width=60,height=60> 

Answer 4

I am surprised that no one here mentioned the html cell magic option. from docs (IPython, but same for Jupyter)

%% HTML

 Render the cell as a block of HTML 

Answer 5

In addition to other answers, using HTML (either in Markdown, or using %%HTML magic:

If you need to specify the height of the image, this will not work:

 <img src="image.png" height=50> <-- will not work 

This is because the CSS style in Jupyter uses height: auto by default for img tags, which overrides the HTML height attribute. You need to rewrite the CSS height attribute instead:

 <img src="image.png" style="height:50px"> <-- works 

Answer 6

I know this is not entirely relevant, but since this answer comes first many times when searching for “how to display images in Jupyter”, please consider this answer as well.

You can use matplotlib to display the image as follows.

 import matplotlib.pyplot as plt import matplotlib.image as mpimg image = mpimg.imread("your_image.png") plt.imshow(image) plt.show() 

Answer 7

Here you can do it with Markdown:

 ![Image of Yaktocat](https://octodex.github.com/images/yaktocat.png) 

Answer 8

If you want to use the Jupyter Notebook API (not IPython), I find the ipywidgets subproject of Jupyter.You have an Image widget. Docstring indicates that you have a value parameter, which is a byte. So you can do:

 import requests from ipywidgets import Image Image(value=requests.get('https://octodex.github.com/images/yaktocat.png').content) 

I agree, it's easier to use the Markdown style. But it shows you the Note Display API. You can also resize the image using the width and height options.

Answer 9

Here is the solution for Jupyter and Python3 :

I placed my images in a folder called ImageTest . My directory:

 C:\Users\MyPcName\ImageTest\image.png 

To show the image, I used this expression:

 ![title](/notebooks/ImageTest/image.png "ShowMyImage") 

Also keep an eye on / and \

Answer 10

This works for me in the markdown cell. Somehow I do not need to specifically mention if this is an image or a simple file.

 ![](files/picture.png) 

Answer 11

I found that the path to your image should be relative to where the notebook was originally downloaded from. if you change to another directory, such as Pictures, your Markdown path will still be relative to the original download directory.

Answer 12

When working with software packages that I would like to demonstrate, I use the Snagit editor to comment on the screenshot, then copy and paste the image directly from the editor into Jupyter ...