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

Question

I would like to include image in a jupyter notebook.

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

Billiot

Note that I drag images from my desktop to my notebook, and this works fine. Except I realize, one limitation is that you can only have one image per Markdown cell. – Kramatorsk

Answer 1

You mustn't use quotation marks around the name of the image files in markdown!

If you carefully read your error message, you will see the two %22 parts in the link. That is the html encoded quotation mark.

You have to change the line

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

to

![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 file example.ipynb (<-- contains the markdown for the image) is stored:

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

Angkor

For me, this doesn't work when downloading the notebook as html. It shows a broken image link. Using IPython.display.Image works as expected. – Intercrop

@cheflo The above syntax doesn't embed the image in the html file. If you look in the sourcecode of the html file, you will find an entry like <img src="img/picture.png" alt="title" > . To see the picture you have to copy it in the folder img relativ to the html file. – Angkor

I suspected that was the case, thanks for clarifying. I thought this difference between the two approaches was unexpected and, at least for me, determined which one to choose, so I wanted to bring attention to it. – Intercrop

while doing it via markdown, ensure image file is in the same directory in which your notebook lies, for some strange reason (in my case), jupyter-notebook was not convinced to act on full path... ![title](picture.png) – Forbade

When I do either <img src="pyplot_annotation.png" alt="Annotation Examples" style="width:600px"> or ![Annotation Examples](pyplot_annotation.png) all I get is Annotation Examples and no image. The pyplot_annotation.png is in the same directory as the ipynb file. – Atabrine

I found an answer to my problem: #40527691 – Atabrine

@ArunKumarKhattri - had the same issue, only reletive path to the notebook worked - in my case:  – Choke

This is not working as is. More investigations into relative paths are needed for this to be a robust answer. – Damocles

@javadba can you specify your problem? – Angkor

The problem is the local path on the Jupyter machine where to place files so that they could be accessible in the demonstrated way? – Vinnie

@SergeyShcherbakov If you run the jupyter notebook command in the path where your notebook is, you have to put the image in a subdirectory of this path with the name img. – Angkor

Thank you @SebastianStigler, that worked. Would be nice to add this detail to your answer. – Vinnie

What Arun Kumar Khattri said is important! Jupyter Notebook doesn't take full paths into account. So it has to be either in the same directory as the kernel, or in a subdirectory. However, I'd definitely advise you to use html syntax, because then you can specify more attributes such as the dimensions of the image. – Fibrous

Please see the 2nd answer by @Reblochon Masque too; it's more thorough – Monocarpic

@CoffeeTableEspresso of course it can. You have to html escape the spaces in the name. If the file is called The picture with spaces.jpg then you have to type the following in the notebook: ![alt text for the picture](The%20picture%20with%20spaces.jpg) – Angkor

@SebastianStigler I did not realize you could do that, thanks for that – Eudoca

It raises error for my case: /bin/sh: -c: line 0: syntax error near unexpected token img/picture.jpg'; /bin/sh: -c: line 0: [title](img/picture.jpg)' – Varden

Make sure that you change img/picture.png to img/picture.PNG if you want the images you've added to render properly in Github! – Municipal

This did NOT work for me in Jupyter Lab 3.0.7. When I do ![title](img/picture.png) I get /bin/sh: 1: Syntax error: word unexpected (expecting ")") – Photodynamics

@BartekSkwira This error message shows that you executed this string in a python cell and not a markdown cell. Change the cell type to markdown and it will work. – Angkor

@SebastianStigler omg You're right :) I didn't change cell type to Markdown, now it worked perfectly. Thanks! – Photodynamics

It seems if I changed an image after loading the image, it would use the cached image rather than the new image – Lianneliao

@Lianneliao That is a behaviour of your browser not jupyter notebook. Refresh the page (after you saved it) and the new image should appear. – Angkor

I get: zsh:1: unknown file attribute: i – Highboy

Answer 2

There are several ways to post 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 via relative or absolute path.

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

if the image it wider than the display settings: thanks

use unconfined=True to disable max-width confinement of the image

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

or via markdown:

• make sure the cell is a markdown cell, and not a code cell, thanks @游凯超 in the comments)
• Please note that on some systems, the markdown does not allow white space in the filenames. Thanks to @CoffeeTableEspresso and @zebralamy in the comments)
  (On macos, as long as you are on a markdown cell you would do like this: ![title](../image 1.png), and not worry about the white space).

for a web image:

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

as shown by @cristianmtr Paying attention not to use either these quotes "" or those '' around the url.

or a local one:

![title](img/picture.png)

demonstrated by @Sebastian

Eyeshade

It is true that, the possibility to resize the picture is interesting. But for future rendering, markdown is better for me. – Billiot

can you put a local one with absolute path, via markdown ? i tried but it doesn't seem to work. Edit: Firefox (and Chrome) don't allow access to local files for security – Homopolar

@CiprianTomoiagă What do you mean ? chrome/ff can display local files – Damocles

I meant that if the path is not under the tree where jupyter was started, you cannot show it. e.g. !tmp_img . I think I was getting some permission warning in chrome console in some cases – Homopolar

Why doesn't this work. When doing !Image of Yaktocat, I get /bin/sh: 1: Syntax error: "(" unexpected – Icelandic

Can you please be more specific as to exactly what you were not able to make work? – Eyeshade

@Icelandic you should select the right cell type. your current cell type must be code – Horseshit

It's been long but what if my file name contains a blank? like test 1.png? – Bouffant

On macos, as long as you are on a markdown cell you would do like this: ![title](../image 1.png), and not worry about the white space - on windows, I have no idea. – Eyeshade

beware with the paths, what works locally does not work online, .e. imgs\pic.png works locally, while online it is 1: case sensitve (Pic.png) 2: backslach and slash are not the same ... :/ – Vaporescence

Underrated answer. Very thorough – Monocarpic

the markdown version doesn't allow spaces in file names, for anyone running into that problem – Eudoca

Answer 3

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

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

Inventory

Great! I much prefer this answer since we have the control on the output size ! That's important for example when using the pelican tool to publish jupyter notebook as static html pages. – Moonfaced

HTML doesn't need commas — just put a space between your attributes — and it's recommended to put quotes around all attribute values, e.g. width="60". – Aigrette

Yes it is awesome :) but ... the image is lost in PDF versions. Too bad. – Trictrac

this solution worked in Microsoft Edge, but does NOT work on Google Chrome. Unfortunately, Microsoft Edge keeps crashing, so having to go back to Chrome – Internalcombustion

Answer 4

Insert the image directly in the Jupyter notebook.

Note: You should have a local copy of the image on your computer

You can insert the image in the Jupyter notebook itself. This way you don't need to keep the image separately in the folder.

Steps:

1. Convert the cell to markdown by:

   • pressing M on the selected cell
     OR
     
   • From menu bar, Cell > Cell Type > Markdown.
     (Note: It's important to convert the cell to Markdown, otherwise the "Insert Image" option in Step 2 will not be active)

2. Now go to menu bar and select Edit -> Insert Image.

3. Select image from your disk and upload.

4. Press Ctrl+Enter or Shift+Enter.

This will make the image as part of the notebook and you don't need to upload in the directory or Github. I feel this looks more clean and not prone to broken URL issue.

Present

Saved me!, Thanks – Madelyn

Yet another helpful functionality added by the devs of Jupyter. One disadvantage to note, for cases when this matters: it would include the image in the IPyNB Jason code, thus making it much bigger and not as code revision friendly (e.g. when inspecting diffs). – Eimile

Awesome! That works well! Thank you so much! – Bulky

Is there any capacity to change the dimensions or size of the picture this way? Otherwise, it's fairly large for me. – Flofloat

Markdown seems to be assuming a page width of 800 pixels or thereabouts. I rescaled my “large” image from 720 pixels wide to 360 pixels wide, and it appeared at half the size in the page. – Surprint

This is the way. This allowed me to export my jupyter notebook as html and still see the image. Thank you! – Fredi

Answer 5

1. Set cell mode to Markdown
2. Drag and drop your image into the cell. The following command will be created:

![image.png](attachment:image.png)

3. Execute/Run the cell and the image shows up.

The image is actually embedded in the ipynb Notebook and you don't need to mess around with separate files. This is unfortunately not working with Jupyter-Lab (v 1.1.4) yet.

Edit: Works in JupyterLab Version 1.2.6

Multiple

Yes bat when I want download as HTML embebed , I get the error "nbconvert failed: missing attachment: imagen.png". ¿Why? – Phippen

Pasting an image from the clipboard also works for me (after setting cell mode to Markdown) – Special

I wonder if an embedded image can be used with HTML? That way we could specify the width and height. – Ensample

Answer 6

I know this is not fully relevant, but since this answer is ranked first many a times when you search 'how to display images in Jupyter', please consider this answer as well.

You could use matplotlib to show an image as follows.

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

Ivaivah

Answer 7

In addition to the other answers using HTML, either embedded into Markdown or using the %%HTML magic:

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

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

That is because the CSS styling in Jupyter uses height: auto per default for the img tags, which overrides the HTML height attribute. You need to overwrite the CSS height attribute instead:

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

Cornhusking

Answer 8

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

%%html

Render the cell as a block of HTML

Allanallana

Answer 9

Here's how you can do it with Markdown:

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

Footed

For some reasons, displaying images via markdown doesn't work for me... Are you sure the syntax is correct cristianmtr? – Eyeshade

Yup, just tested it again. Are you sure you set the cell to Markdown? Also, what version of IPython/Jupyter are you using? Mine says: "The version of the notebook server is 4.0.4 and is running on: Python 2.7.8 (default, Jun 30 2014, 16:08:48) [MSC v.1500 64 bit (AMD64)]" Here's a screenshot with the results: i.imgur.com/4ISJFDE.png – Footed

beware with the paths, what works locally does not work online, .e. imgs\pic.png works locally, while online it is 1: case sensitve (Pic.png) 2: backslach and slash are not the same ... :/ – – Vaporescence

Works great in Python 3.8. Thanks – Eclecticism

No spaces are allowed in the filename for markdown, in case anyone else was running into this problem – Eudoca

Answer 10

If you want to use the Jupyter Notebook API (and not the IPython one anymore), I find the ipywidgets Jupyter's sub-project. You have an Image widget. Docstring specifies that you have a value parameter which is a bytes. 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 simpler to use the Markdown style. But it shows you the Image display Notebook API. You can also resize the image with the width and height parameters.

Mudstone

It seems option value was renamed to data in the meantime. For a locally stored image the code Image(data=open(filename_png, 'rb').read()) worked for me. – Traverse

@Traverse I needed to still use value, as data didn't work with jupyter==1.0.0 notebook==6.4.0. So the solution is: Image(value=open(filename_png, 'rb').read()) – Querulous

Answer 11

While a lot of the above answers give ways to embed an image using a file or with Python code, there is a way to embed an image in the jupyter notebook itself using only markdown and base64!

To view an image in the browser, you can visit the link data:image/png;base64,**image data here** for a base64-encoded PNG image, or data:image/jpg;base64,**image data here** for a base64-encoded JPG image. An example link can be found at the end of this answer.

To embed this into a markdown page, simply use a similar construct as the file answers, but with a base64 link instead: ![**description**](data:image/**type**;base64,**base64 data**). Now your image is 100% embedded into your Jupyter Notebook file!

Example link: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABHNCSVQICAgIfAhkiAAAAD9JREFUGJW1jzEOADAIAqHx/1+mE4ltNXEpI3eJQknCIGsiHSLJB+aO/06PxOo/x2wBgKR2jCeEy0rOO6MDdzYQJRcVkl1NggAAAABJRU5ErkJggg==

Example markdown: ![smile](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABHNCSVQICAgIfAhkiAAAAD9JREFUGJW1jzEOADAIAqHx/1+mE4ltNXEpI3eJQknCIGsiHSLJB+aO/06PxOo/x2wBgKR2jCeEy0rOO6MDdzYQJRcVkl1NggAAAABJRU5ErkJggg==)

Joellenjoelly

This is exactly what I needed! – Batrachian

Answer 12

Here is a Solution for Jupyter and Python3:

I droped my images in a folder named ImageTest. My directory is:

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

To show the image I used this expression:

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

Also watch out for / and \

Marshallmarshallese

This only works out for me. Thanks! "ShowMyImage" works like a charm! – Illusive

Answer 13

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

![](files/picture.png)

Shanklin

How does it differ from the Sebastian Stigler's answer? – Thallus

Just wanted to highlight that it worked for me without including title within the squared bracket. Nothing different. – Shanklin

Answer 14

For some reason no other solutions work for me.(also works with namge.jpg).

Here what is working:

1. Change cell to markdown
2. Copy past:

<div>
<img src=attachment = "name.png" width="600"/>
</div> 

3. Make an empty line after </div> in the same cell and drop your image using mouse into this line.
4. You will see something like that:

<div>
<img src="attachment:name.png" width="600"/>
</div>
![yourname.jpg](attachment:yourname.jpg)

5. Copy yourname.jpg and past it instead of name.png
6. Remove ![yourname.jpg](attachment:yourname.jpg).
7. The final result should look like:

<div>
<img src="yourname.jpg" width="600"/>
</div>

8. Run sell (shift+enter) and you will see your image

Boisleduc

Answer 15

I made some research on this topic and found 4 ways for inserting images in Jupyter Notebook that I've described in my article.

1. Drag-and-drop image to the cell (simplest!)

Please switch the cell to markdown type and just drag and drop the image there. The image will be internally encoded as Base64 and its text representation will be included in the ipynb file. I recommend this only for small images because your notebook ipynb file can become very large and laggy (if too many large images are dropped in).

2. Insert hosted image

Upload the image to the server (might be Imgur or GitHub) and enter the image URL in the Markdown:

![alternative text goes here](path-to-the-image)

3. Insert local file image

You can use the above method with a local image but it needs to have the same root directory as the notebook.

In the Markdown:

![alternative text](path-to-image)

or you can use Python:

from IPython import display
display.Image("path-to-image")

4. Convert image to Base64 (only for small images)

Similar to the first step with a difference that conversion to Base64 is done manually.

The Python code:

from IPython import display
from base64 import b64decode
base64_data = "iVBORw0KGgoAAAANSUhEUgAABL ...  the rest of data "
display.Image(b64decode(base64_data))

Should be used with rather small images.

I'm personally using the second method with images hosted in the GitHub repository.

Cheryle

Answer 16

One thing I found is the path of your image must be relative to wherever the notebook was originally loaded from. if you cd to a different directory, such as Pictures your Markdown path is still relative to the original loading directory.

Spheroidal

Answer 17

I'm assuming you mean in a markdown cell, inside a jupyter notebook. If so, here are the easiest ways for both:

From the local computer:

With your file browser, navigate to the directory containing your picture. Then, drag and drop it into the cell you want to embed the picture. It must already be in markdown mode or nothing will happen.

The pros of doing it this way are:

• It's simple, just drag and drop

The cons of doing it this way:

• You cannot copy and paste that link, and use it in any other cell. If you want to use the same picture in any other notebook cell, you will need to find the picture, drag and drop into the cell again.

• You should consider a file management scheme that will allow you to find a picture again, if you plan on using allot of pictures in your notebooks.

This is an effective way of doing things that's worked for me.

From the web:

The easiest way is to simply find a picture using your web browser, right click and "Copy image", paste this into the cell you want the image displayed.

As above this does come with caveats in that you can't copy this and link and paste it into another cell. So if you plan on using the image again, you'll have to either paste into another cell, or save this image locally.

The images are embedded in the notebook so should work anywhere the notebook is opened.

Velarium

Answer 18

Insert images that are present locally

Quick Solution : Watch this Video (1:36) https://www.youtube.com/watch?v=Vw1EZh1My8s

---

In short :

1. Go to the location where your .ipynb is present.
2. Create folder called images and paste image that you want insert in jupyter in that images folder
3. Open .ipynb file on browser and there click on cell and type :
4. There is a dropdown button which is mentioned as Code. Change that to Markdown
5. Hurray!! Now run the code by hitting shift + Enter

---

Reference image

Pascasia

Answer 19

Agreed, i had the same issues and this is what worked and what did not:

WORKED: <img src="Docs/pinoutDOIT32devkitv1.png" width="800"/>
*DOES NOT WORK: <img src="/Docs/pinoutDOIT32devkitv1.png" width="800"/>
DOES NOT WORK: <img src="./Docs/pinoutDOIT32devkitv1.png" width="800"/>*

Dualpurpose

These are just variations of the path to the file on your computer, you might want to learn about absolute and relative paths. – Scuff