How to embed image or picture in jupyter notebook, either from a local machine or from a web resource?
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
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
There are several ways to post an image in Jupyter notebooks:
from IPython.display import Imagefrom 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
unconfined=True to disable max-width confinement of the image
from IPython.core.display import Image, displaydisplay(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 @cristianmtrPaying attention not to use either these quotes
"" or those
'' around the url.
or a local one:
demonstrated by @Sebastian