Вставка изображения в разметку ноутбука IPython

217

Я начинаю сильно зависеть от приложения для ноутбука IPython при разработке и документировании алгоритмов. Это превосходно; но есть кое-что, что кажется возможным, но я не могу понять, как это сделать:

Я хотел бы вставить локальное изображение в мою (локальную) разметку ноутбука IPython, чтобы помочь в документировании алгоритма. Я знаю достаточно, чтобы добавить что-то вроде <img src="image.png">к уценке, но это все, что касается моих знаний. Я предполагаю, что мог бы поместить изображение в каталог, представленный 127.0.0.1:8888 (или в некоторый подкаталог), чтобы иметь к нему доступ, но я не могу понять, где находится этот каталог. (Я работаю над Mac.) Итак, возможно ли сделать то, что я пытаюсь сделать, без особых проблем?

benpro
источник

Ответы:

201

Файлы внутри директории ноутбука доступны по ссылке «files /». Так что, если он находится в базовом пути, он будет <img src="files/image.png">доступен <img src="files/subdir/image.png">, и также доступны подкаталоги и т. Д.

Обновление : начиная с IPython 2.0 files/префикс больше не нужен (см. Примечания к выпуску ). Так что теперь решение <img src="image.png">просто работает, как и ожидалось.

minrk
источник
3
Ах, вы, вероятно, используете 0,12, не так ли? Обслуживание локальных файлов в настоящее время доступно только в master. И да, «каталог записной книжки» - это каталог с записными книжками (файлы .ipynb).
minrk
107
Так как вы в уценке, почему бы не использовать ![caption](files/image.png)?
Кинан
4
@minrk: это не работает для меня. Я поставил "<img src =" k.png ">", но это ничего не показывает. k.png находится в той же папке, что и файл ноутбука.
Абид Рахман К
4
Пожалуйста, перечитайте ответ и комментарии. Ваш URL всегда будет начинаться с 'files /', поэтому, если у вас есть k.pngрядом с вашей записной книжкой, URL будет src="files/k.png".
Minrk
2
Вы должны обновить веб-страницу для изображений по указанному URL-адресу для перезагрузки.
minrk
230

Большинство ответов, приведенных до сих пор, идут в неправильном направлении, предлагая загрузить дополнительные библиотеки и использовать код вместо разметки. В ноутбуках Ipython / Jupyter это очень просто. Убедитесь, что ячейка действительно находится в разметке, и для отображения изображения используйте:

![alt text](imagename.png "Title")

Дополнительное преимущество по сравнению с другими предлагаемыми методами заключается в том, что вы можете отображать все распространенные форматы файлов, включая jpg, png и gif (анимации).

Филипп Шварц
источник
Любопытно, как вы знаете эту команду. Это уникально для Jupyter или это какой-то язык (возможно, латексное форматирование), который вы используете в Jupyter для добавления изображения?
Алекс Г
1
@ Alex G, Markdown - это язык с синтаксисом форматирования простого текста, разработанный для того, чтобы его можно было конвертировать в HTML и многие другие форматы. Markdown часто используется для создания форматированного текста с использованием текстового редактора. Проверьте следующую ссылку, чтобы узнать синтаксис: github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet
Филипп Шварц
@PhilippSchwarz Есть ли в вашем примере несколько вариантов для управления размером вставляемого изображения? С помощью <img...>тега такие параметры выглядят примерно так <img ... width="480">.
Reb.Cabin
1
Используя это не сработало. Записная книжка искала в определенном месте / notebooks / <мой рабочий путь добавлен здесь> - конечно, это не root - и локальный путь не существовал. Я нашел полезным использовать изображение для вставки в блокнот, которое добавляло изображение в качестве вложения (теперь оно переносное).
Mark
2
Есть ли способ использовать этот метод с файлами изображений, в именах которых есть пробел?
Зебралами
78

Я использую ipython 2.0, поэтому просто две строки.

from IPython.display import Image
Image(filename='output1.png')
Gomes
источник
25
Это правильный способ отображения изображения в ячейке кода . Ответ minrk - правильный способ отображения изображения в ячейке уценки .
Майк
3
Используя jupyter notebook 4.2.0, изображение не отображается, если я displayтоже не позвоню : from IPython.display import Image, display; display(Image(filename='output1.png'))
Matteo T.
22

[Устаревшее]

IPython / Jupyter теперь поддерживает модули расширения, которые могут вставлять изображения с помощью копирования и вставки или перетаскивания.

https://github.com/ipython-contrib/IPython-notebook-extensions

Расширение drag & drop работает в большинстве браузеров

https://github.com/ipython-contrib/IPython-notebook-extensions/tree/master/nbextensions/usability/dragdrop

Но копирование и вставка работает только в Chrome.

Майк
источник
1
Этот ответ требует некоторых голосов. Очень немногие знают о расширениях Ipython.
Торан
только что попробовал drag'n'drop в Safari и Chrome, у меня не работает (OSX, Py3, все обновления)
K.-Michael Aye
2
Вторая ссылка, которую вы разместили, не работает - расширение больше не поддерживается?
zthomas.nc
Я также не могу найти расширение больше.
yerforkferchips
Да, Jupyter немного продвинулся за последние три года, и этот ответ довольно устарел.
Майк
18

Получение изображения в Jupyter NB - намного более простая операция, чем большинство людей упоминало здесь.

1) Просто создайте пустую ячейку Markdown. 2) Затем перетащите файл изображения в пустую ячейку Markdown.

Затем появится код уценки, который вставит изображение.

Например, строка, выделенная серым цветом ниже, появится в ячейке Jupyter:

![Venus_flytrap_taxonomy.jpg](attachment:Venus_flytrap_taxonomy.jpg)

3) Затем выполните ячейку Markdown, нажав Shift-Enter. Сервер Jupyter затем вставит изображение, и изображение появится.

Я использую сервер ноутбука Jupyter: 5.7.4 с Python 3.7.0 в Windows 7.

Это так просто!

Рич Лысаковский PhD
источник
2
Это действительно лучшее решение, которое я нашел!
GCGM
К сожалению, этот метод не работает, когда Jupyter Notebook версии 6.0 размещен в Google Cloud. У кого-нибудь есть обходной путь, который работает без прав администратора, что-то кроме установки перетаскивания nbextension?
Рич Лысаковски доктор философии
13

Я положил записную книжку IPython в одну папку с изображением. Я использую Windows. Название изображения "phuong huong xac dinh.PNG".

В уценке:

<img src="phuong huong xac dinh.PNG">

Код:

from IPython.display import Image
Image(filename='phuong huong xac dinh.PNG')
Гидромен
источник
1
ссылка на документацию ipython.readthedocs.io/en/stable/api/generated/… , хотя использование markdown ( ![alt text](foo.png "the title")желательно в imho, если не требуется использование дополнительных аргументов из api.
Майкл
9

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

Это альтернативный способ, предложенный другими <img src="myimage.png">:

![title](img/picture.png)

Это также, кажется, работает, если заголовок отсутствует:

![](img/picture.png)

Обратите внимание, что в пути не должно быть цитат. Не уверен, что это работает для путей с пробелами, хотя!

tsando
источник
1
Для меня изображения с пробелами в имени не отображались в блокноте. Я удалил пробелы, я могу видеть сейчас.
insanely_sin
9

Последняя версия ноутбука Jupyter принимает копирование / вставку изображения изначально

Ромэн Жуан
источник
Я предпочитаю этот вариант, так как он встраивает изображение в двоичный файл ноутбука. Это делает ноутбук тяжелее, но вам не нужно держать изображение в относительном направлении.
Тулио Казагранде
8

Если вы хотите отобразить изображение в ячейке Markdown, используйте:

<img src="files/image.png" width="800" height="400">

Если вы хотите отобразить изображение в ячейке кода, используйте:

from IPython.display import Image
Image(filename='output1.png',width=800, height=400)
seralouk
источник
В ячейке уценки, для меня, работает без запятых:<img src="files/image.png" width=800 height=400>
aerijman
это правда, что запятые не нужны в командах HTML. см. мое обновление
seralouk
5

Измените блок по умолчанию с «Code» на «Markdown» перед запуском этого кода:

![<caption>](image_filename.png)

Если файл изображения находится в другой папке, вы можете сделать следующее:

![<caption>](folder/image_filename.png)
Джейд Качо
источник
4

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

Я положил mypic.pngв

/root/Images/mypic.png

(это папка «Изображения», которая отображается в онлайн-браузере файлов Jupyter)

В этом случае мне нужно поместить следующую строку в ячейку «Markdown», чтобы моя картинка отображалась в блокноте:

![My Title](Images/mypic.png)
Сергей Щербаков
источник
2

Ответ Минрка правильный.

Однако я обнаружил, что изображения выглядят испорченными в режиме «Просмотр печати» (на моем компьютере с Windows, работающем с Anaconda, версия IPython версии 0.13.2 в браузере Chrome)

Обходной путь для этого должен был использовать <img src="../files/image.png"> вместо этого.

Это позволило правильно отобразить изображение как в режиме печати, так и в обычном режиме редактирования iPython.

ОБНОВЛЕНИЕ: с моего обновления до iPython v1.1.0 больше нет необходимости в этом обходном пути, так как представление печати больше не существует. Фактически, вы должны избегать этого обходного пути, поскольку он не позволяет инструменту nbconvert находить файлы.

jlarchibald
источник
-3

Вы можете найти свой текущий рабочий каталог командой pwd в блокноте jupyter без кавычек.

Номан Назир
источник