Как включить изображение или картинку в блокнот jupyter

Я хотел бы включить изображение в блокнот jupyter.

если бы я сделал следующее, это работает:

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

но я хотел бы включить изображения в ячейку markdown, и следующий код дает ошибку 404:

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

Я тоже пробовал

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

но я все еще получаю ту же ошибку :

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

9 ответов:

вы не должны использовать кавычки вокруг имени файлов изображений в markdown!

если вы внимательно читали сообщение об ошибке, вы увидите два %22 детали в ссылке. Это закодированная в html кавычка.

вы должны изменить строку

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

до 

![title](img/picture.png)

обновление

предполагается, что у вас есть следующая структура файлов и запуск в каталоге где файл example.ipynb ( 

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

есть несколько способов разместить изображение в блокнотах Jupyter:

через HTML:

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

вы сохраняете возможность использовать HTML-теги для изменения размера и т. д...

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

вы также можете отображать изображения, хранящиеся локально, либо через относительный или абсолютный путь.

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

если изображение его шире, чем настройки дисплея:спасибо

использовать unconfined=True чтобы отключить ограничение максимальной ширины изображение

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

или через markdown:

(убедитесь, что ячейка является ячейкой уценки, а не ячейкой кода, спасибо @游超 в комментариях)

для веб-изображения:

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

как показано @cristianmtr Обращая внимание не использовать ни эти цитаты "" или такие '' по URL-адресу.

или местный:

![title](img/picture.png)

продемонстрировано @Sebastian

109

кроме того, вы можете использовать простой HTML <img src>, который позволяет изменять высоту и ширину и по-прежнему читается интерпретатором markdown:

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

вот как вы можете сделать это с Markdown:

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

если вы хотите использовать Jupyter Notebook API (а не IPython one больше), я нахожу ipywidgets Jupyter по. У вас есть Image виджет. Docstring указывает, что у вас есть

8

Я удивлен, что никто здесь не упомянул опцию html cell magic. из docs (IPython, но то же самое для Jupyter)

% % html

Render the cell as a block of HTML
8

вот решение для Jupyter и Python3:

Я бросил свои изображения в папку с именем ImageTest. Мой каталог:

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

показать изображение я использовал это выражение:

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

также следи за / и \

4

это работает для меня в ячейке markdown. Как-то мне не нужно упоминать конкретно, если это изображение или простой файл. 

![](files/picture.png)
3

в дополнение к другим ответам с использованием HTML (либо в Markdown, либо с помощью %%HTML магия:

Если вам нужно указать высоту изображения, это не будет работать:

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

это потому, что стиль CSS в Jupyter использует height: auto по умолчанию для img теги, которые переопределяют атрибут высоты HTML. Вам нужно нужно перезаписать CSS height атрибут вместо:

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