Wstawianie obrazu do znacznika notebooka IPython

217

Zaczynam w dużym stopniu polegać na aplikacji do notatników IPython, aby opracowywać i dokumentować algorytmy. To jest wspaniałe; ale jest coś, co wydaje się być możliwe, ale nie mogę wymyślić, jak to zrobić:

Chciałbym wstawić lokalny obraz do mojego (lokalnego) znacznika notebooka IPython, aby pomóc w udokumentowaniu algorytmu. Wiem wystarczająco dużo, aby dodać coś podobnego <img src="image.png">do przeceny, ale o tyle, o ile mi wiadomo. Zakładam, że mógłbym umieścić obraz w katalogu reprezentowanym przez 127.0.0.1:8888 (lub jakiś podkatalog), aby móc uzyskać do niego dostęp, ale nie wiem, gdzie jest ten katalog. (Pracuję na komputerze Mac). Czy można więc robić to, co próbuję, bez większych problemów?

— benpro
źródło

201

Pliki w katalogu notesu są dostępne pod adresem „files /”. Więc jeśli znajduje się w ścieżce bazowej, byłoby <img src="files/image.png">, i podkatalogi itp. Są również dostępne: <img src="files/subdir/image.png">itd.

Aktualizacja : począwszy od IPython 2.0 files/prefiks nie jest już potrzebny (patrz informacje o wersji ). Więc teraz rozwiązanie <img src="image.png">działa po prostu zgodnie z oczekiwaniami.

— norek
źródło

3

Ach, prawdopodobnie używasz 0.12, prawda? Udostępnianie plików lokalnych jest obecnie dostępne tylko w trybie głównym. I tak, „katalog notebooków” to katalog z notatnikami (pliki .ipynb).

— minrk

107

Skoro jesteś w przecenie, dlaczego nie skorzystać ![caption](files/image.png)?

— kynan

4

@minrk: dla mnie to nie działa. Wstawiam „<img src =" k.png ">", ale nic nie pokazuje. k.png znajduje się w tym samym folderze, co plik notesu.

— Abid Rahman K

4

Przeczytaj ponownie odpowiedź i komentarze. Twój adres URL zawsze będzie zaczynać się od „files /”, więc jeśli masz k.pngobok swojego notebooka, adres URL to src="files/k.png".

— minrk 24.04.13

2

musisz odświeżyć stronę internetową, aby obrazy w danym adresie URL zostały ponownie załadowane.

— minrk

230

Większość podanych do tej pory odpowiedzi idzie w złym kierunku, co sugeruje załadowanie dodatkowych bibliotek i użycie kodu zamiast znaczników. W notesach Ipython / Jupyter jest to bardzo proste. Upewnij się, że komórka rzeczywiście znajduje się w znacznikach, i wyświetl obraz:

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

Kolejną zaletą w porównaniu z innymi proponowanymi metodami jest to, że możesz wyświetlać wszystkie popularne formaty plików, w tym jpg, png i gif (animacje).

— Philipp Schwarz
źródło

Ciekawe, skąd znasz to polecenie. Czy jest to unikalne dla Jupyter, czy jest to jakiś język (być może formatowanie lateksu), którego używasz w Jupyter do dodawania obrazu?

— Alex G

1

@ Alex G, Markdown jest językiem ze składnią formatowania zwykłego tekstu zaprojektowaną tak, aby można go było konwertować na HTML i wiele innych formatów. Markdown jest często używany do tworzenia tekstu sformatowanego za pomocą zwykłego edytora tekstu. Sprawdź poniższy link, aby poznać składnię: github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet

— Philipp Schwarz

@PhilippSchwarz, czy istnieją jakieś opcje w powyższym przykładzie, aby kontrolować rozmiar „wklejonego” obrazu? Przy użyciu <img...>znacznika takie opcje wyglądają mniej więcej tak <img ... width="480">.

— Reb.Cabin

1

Korzystanie z tego nie działało. Notatnik szukał w określonej lokalizacji / notesach / <moja ścieżka robocza została tu dołączona> - na pewno nie jest to root - a ścieżka lokalna nie istniała. Uznałem, że pomocne jest po prostu użycie obrazu wkładki do notebooka - który dodał obraz jako załącznik (który jest teraz przenośny).

— Mark

2

Czy jest jakiś sposób na użycie tej metody w przypadku plików obrazów, które mają spacje w swoich nazwach?

— zebralamy

78

Używam ipython 2.0, więc tylko dwie linie.

from IPython.display import Image
Image(filename='output1.png')

— Gomes
źródło

25

To jest prawidłowy sposób wyświetlania obrazu w komórce kodu . Odpowiedź minrka to poprawny sposób wyświetlania obrazu w komórce przeceny .

— Mike,

3

Za pomocą notatnika jupyter 4.2.0 obraz nie jest wyświetlany, chyba że displayteż zadzwonię : from IPython.display import Image, display; display(Image(filename='output1.png'))

— Matteo T.

22

[Przestarzały]

IPython / Jupyter obsługuje teraz moduły rozszerzeń, które mogą wstawiać obrazy poprzez kopiowanie i wklejanie lub przeciąganie i upuszczanie.

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

Wydaje się, że rozszerzenie przeciągnij i upuść działa w większości przeglądarek

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

Ale kopiowanie i wklejanie działa tylko w Chrome.

— Mikrofon
źródło

1

Ta odpowiedź wymaga pozytywnych opinii. Bardzo niewielu wie o rozszerzeniach Ipython.

— Thoran

właśnie wypróbowałem drag'n'drop w Safari i Chrome, nie działa dla mnie (OSX, Py3, wszystkie aktualizacje)

— K.-Michael Aye

2

Drugi opublikowany link jest uszkodzony - rozszerzenie nie jest już obsługiwane?

— zthomas.nc

Nie mogę też znaleźć rozszerzenia.

— yerforkferchips

Tak, Jupyter trochę się zmienił w ciągu ostatnich trzech lat i ta odpowiedź jest dość przestarzała.

— Mike

18

Przenoszenie obrazu do Jupyter NB jest znacznie prostszą operacją, niż większość ludzi tu wspomniała.

1) Po prostu utwórz pustą komórkę Markdown. 2) Następnie przeciągnij i upuść plik obrazu do pustej komórki Markdown.

Pojawi się kod Markdown, który wstawi obraz.

Na przykład ciąg pokazany podświetlony na szaro poniżej pojawi się w komórce Jupyter:

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

3) Następnie uruchom komórkę Markdown, naciskając Shift-Enter. Serwer Jupyter wstawi następnie obraz, a następnie pojawi się obraz.

Używam serwera notebooków Jupyter: 5.7.4 z Python 3.7.0 w systemie Windows 7.

To takie proste !!

— Dr Rich Lysakowski
źródło

2

To naprawdę najlepsze rozwiązanie, jakie znalazłem !!

— GCGM

Niestety ta metoda nie działa, gdy Jupyter Notebook w wersji 6.0 jest hostowany w Google Cloud. Czy ktoś ma obejście, które działa bez uprawnień administratora, oprócz instalacji przeciągania i upuszczania rozszerzenia?

— Rich Lysakowski PhD

13

Umieszczam notes IPython w tym samym folderze z obrazem. Używam Windowsa. Nazwa obrazu to „phuong huong xac dinh.PNG”.

W Markdown:

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

Kod:

from IPython.display import Image
Image(filename='phuong huong xac dinh.PNG')

— hydroman
źródło

1

odwołanie do dokumentacji ipython.readthedocs.io/en/stable/api/generated/… , chociaż użycie markdown ( ![alt text](foo.png "the title")jest imho lepsze, chyba że wymagane jest użycie dodatkowych argumentów z interfejsu API

— michael

9

Najpierw upewnij się, że jesteś w modelu edycji przeceny w komórce notesu ipython

Jest to alternatywny sposób dla metody zaproponowanej przez innych <img src="myimage.png">:

![title](img/picture.png)

Wydaje się również działać, jeśli brakuje tytułu:

![](img/picture.png)

Uwaga: na ścieżce nie powinny znajdować się żadne cytaty. Nie jestem pewien, czy to działa w przypadku ścieżek z białymi spacjami!

— Tsando
źródło

1

Dla mnie obrazy z białymi spacjami w nazwie nie były renderowane w zeszycie. Usunąłem spacje, teraz mogę je zobaczyć.

— insanely_sin

9

Ostatnia wersja notatnika jupyter natywnie akceptuje kopiowanie / wklejanie obrazu

— Romain Jouin
źródło

Wolę tę opcję, ponieważ osadza obraz w pliku binarnym notatnika. Sprawia, że notebook jest cięższy, ale nie trzeba utrzymywać obrazu na ścieżce względnej.

— Tulio Casagrande

8

Jeśli chcesz wyświetlić obraz w komórce Markdown, użyj:

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

Jeśli chcesz wyświetlić obraz w komórce Kod, użyj:

from IPython.display import Image
Image(filename='output1.png',width=800, height=400)

— seralouk
źródło

Dla mnie komórka przeceny działa bez przecinków:<img src="files/image.png" width=800 height=400>

— aerijman,

prawdą jest, że przecinki nie są potrzebne w poleceniach HTML. zobacz moją aktualizację

— seralouk

5

Zmień domyślny blok z „Kod” na „Markdown” przed uruchomieniem tego kodu:

![<caption>](image_filename.png)

Jeśli plik obrazu znajduje się w innym folderze, możesz wykonać następujące czynności:

![<caption>](folder/image_filename.png)

— Jade Cacho
źródło

4

Dla tych, którzy szukają, gdzie umieścić plik obrazu na maszynie Jupyter, aby można go było wyświetlić z lokalnego systemu plików.

Kładę mypic.pngINTO

/root/Images/mypic.png

(to jest folder Obrazy, który pojawia się w przeglądarce plików online Jupyter)

W takim przypadku muszę wstawić następujący wiersz do komórki Markdown, aby moje zdjęcie wyświetlało się w notatniku:

![My Title](Images/mypic.png)

— Sergey Shcherbakov
źródło

2

Odpowiedź Minrka jest słuszna.

Okazało się jednak, że obrazy wyglądały na uszkodzone w widoku wydruku (na moim komputerze z systemem Windows z uruchomioną dystrybucją Anaconda w wersji IPython 0.13.2 w przeglądarce Chrome)

Obejściem tego było użycie <img src="../files/image.png">zamiast tego.

Dzięki temu obraz wyświetlał się poprawnie zarówno w Widoku wydruku, jak i normalnym widoku edycji iPython.

AKTUALIZACJA: od mojej aktualizacji do iPython v1.1.0 to obejście nie jest już potrzebne, ponieważ widok wydruku już nie istnieje. W rzeczywistości należy unikać tego obejścia, ponieważ uniemożliwia to narzędziu nbconvert znalezienie plików.

— jlarchibald
źródło

-3

Możesz znaleźć swój aktualny katalog roboczy za pomocą polecenia „pwd” w notatniku jupyter bez cudzysłowów.

— Noman Nazir
źródło