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
![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
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('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
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 />