Inserimento dell'immagine nel markdown del notebook IPython

217

Sto iniziando a dipendere fortemente dall'app per notebook IPython per sviluppare e documentare algoritmi. È fantastico; ma c'è qualcosa che sembra dovrebbe essere possibile, ma non riesco a capire come farlo:

Vorrei inserire un'immagine locale nel mio markdown del notebook (locale) IPython per facilitare la documentazione di un algoritmo. Conosco abbastanza per aggiungere qualcosa di simile <img src="image.png">al markdown, ma ciò riguarda la mia conoscenza. Suppongo che potrei mettere l'immagine nella directory rappresentata da 127.0.0.1:8888 (o qualche sottodirectory) per poter accedervi, ma non riesco a capire dove si trova quella directory. (Sto lavorando su un mac.) Quindi, è possibile fare ciò che sto cercando di fare senza troppi problemi?

— benpro
fonte

201

I file all'interno della directory del notebook sono disponibili sotto l'URL "files /". Quindi, se si trova nel percorso di base, lo sarebbe <img src="files/image.png">, e anche i sottodirri ecc. Sono disponibili:, ecc <img src="files/subdir/image.png">.

Aggiornamento : a partire da IPython 2.0, il files/prefisso non è più necessario (vedi note di rilascio ). Quindi ora la soluzione <img src="image.png">funziona semplicemente come previsto.

— minrk
fonte

3

Ah, probabilmente stai usando 0.12, vero? La pubblicazione di file locali è attualmente disponibile solo nel master. E sì, la "directory notebook" è la directory con i notebook (file .ipynb).

— minrk,

107

Dal momento che sei in markdown, perché non utilizzarlo ![caption](files/image.png)?

— kynan,

4

@minrk: non funziona per me. Ho messo "<img src =" k.png ">", ma non mostra nulla. k.png si trova nella stessa cartella di quella del file notebook.

— Abid Rahman K

4

Rileggi la risposta e i commenti. L'URL inizierà sempre con 'files /', quindi se hai k.pngaccanto al tuo notebook, l'URL sarebbe src="files/k.png".

— minrk,

2

devi ricaricare una pagina web per ricaricare le immagini in un determinato url.

— minrk,

230

La maggior parte delle risposte fornite finora va nella direzione sbagliata, suggerendo di caricare librerie aggiuntive e utilizzare il codice anziché il markup. Nei quaderni Ipython / Jupyter è molto semplice. Assicurati che la cella sia effettivamente in markup e per visualizzare un'immagine usa:

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

Un ulteriore vantaggio rispetto agli altri metodi proposti è che è possibile visualizzare tutti i formati di file comuni tra cui jpg, png e gif (animazioni).

— Philipp Schwarz
fonte

Curioso di come conosci questo comando. È univoco per Jupyter o è un linguaggio (forse formattazione in lattice) che stai usando in Jupyter per aggiungere l'immagine?

— Alex G,

1

@ Alex G, Markdown è multilingue con una sintassi di formattazione del testo semplice progettata in modo che possa essere convertita in HTML e in molti altri formati. Markdown viene spesso utilizzato per creare rich text utilizzando un editor di testo semplice. Controlla il seguente link per imparare la sintassi: github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet

— Philipp Schwarz,

@PhilippSchwarz ci sono alcune opzioni nel tuo esempio sopra per controllare la dimensione dell'immagine 'incollata'? Usando il <img...>tag, tali opzioni appaiono approssimativamente in questo modo <img ... width="480">.

— Reb.Cabin

1

Usandolo non ha funzionato. Notebook stava cercando in una posizione specifica / notebook / <il mio percorso di lavoro allegato qui> - sicuramente questo non è root - e il percorso locale non esisteva. Ho trovato utile usare semplicemente l' immagine di inserimento del notebook , che ha aggiunto l'immagine come allegato (che ora è portatile).

— Segna il

2

Esiste un modo per utilizzare questo metodo con file di immagine che hanno spazio nei loro nomi?

— zebralamy il

78

Sto usando ipython 2.0, quindi solo due righe.

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

— Gomes
fonte

25

Questo è il modo corretto di visualizzare un'immagine in una cella di codice . La risposta di minrk è il modo corretto di visualizzare un'immagine in una cella di markdown .

— Mike,

3

Usando jupyter notebook 4.2.0, non mostra l'immagine se non chiamo displayanche io : from IPython.display import Image, display; display(Image(filename='output1.png'))

— Matteo T.

22

[Obsoleto]

IPython / Jupyter ora supporta i moduli di estensione che possono inserire immagini tramite copia e incolla o trascinamento della selezione.

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

L'estensione drag & drop sembra funzionare nella maggior parte dei browser

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

Ma copia e incolla funziona solo in Chrome.

— Mike
fonte

1

Questa risposta necessita di alcuni voti. Pochissimi conoscono le estensioni di Ipython.

— Thoran,

ho appena provato a trascinare su Safari e Chrome, non funzionando per me (OSX, Py3, tutti gli aggiornamenti)

— K.-Michael Aye,

2

Il secondo link che hai pubblicato è interrotto - l'estensione non è più supportata?

— zthomas.nc,

Inoltre non riesco più a trovare l'estensione.

— yerforkferchips

Sì, Jupyter è passato un po 'avanti negli ultimi tre anni e questa risposta è piuttosto obsoleta.

— Mike,

18

Ottenere un'immagine in Jupyter NB è un'operazione molto più semplice di quanto la maggior parte delle persone abbia accennato qui.

1) Basta creare una cella Markdown vuota. 2) Quindi trascina e rilascia il file immagine nella cella Markdown vuota.

Viene quindi visualizzato il codice Markdown che inserirà l'immagine.

Ad esempio, una stringa mostrata evidenziata in grigio sotto apparirà nella cella di Jupyter:

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

3) Quindi eseguire la cella Markdown premendo Maiusc-Invio. Il server Jupyter inserirà quindi l'immagine e quindi apparirà l'immagine.

Sto eseguendo il server notebook Jupyter è: 5.7.4 con Python 3.7.0 su Windows 7.

Questo è così semplice !!

— Rich Lysakowski PhD
fonte

2

Questa è davvero la migliore soluzione che ho trovato !!

— GCGM,

Sfortunatamente questo metodo non funziona quando Jupyter Notebook versione 6.0 è ospitato su Google Cloud. Qualcuno ha una soluzione alternativa che funziona senza i privilegi di amministratore, qualcosa oltre all'installazione della nbextension di trascinamento della selezione?

— Rich Lysakowski PhD,

13

Ho inserito il notebook IPython nella stessa cartella con l'immagine. Io uso Windows. Il nome dell'immagine è "phuong huong xac dinh.PNG".

In Markdown:

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

Codice:

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

— Hydro-Man
fonte

1

riferimento alla documentazione ipython.readthedocs.io/it/stable/api/generated/… , anche se ![alt text](foo.png "the title")è preferibile usare markdown ( è preferibile, a meno che non sia richiesto l'uso di args aggiuntivi da api.

— michael

9

Per prima cosa assicurati di essere nel modello di modifica markdown nella cella del notebook ipython

Questo è un modo alternativo al metodo proposto da altri <img src="myimage.png">:

![title](img/picture.png)

Sembra anche funzionare se manca il titolo:

![](img/picture.png)

Nota: non ci dovrebbero essere citazioni nel percorso. Non sono sicuro che funzioni per i percorsi con spazi bianchi!

— tsando
fonte

1

Per me, le immagini con spazi bianchi nel nome non venivano riprodotte nel quaderno. Ho rimosso gli spazi, sono in grado di vedere ora.

— insanely_sin

9

L'ultima versione di jupyter notebook accetta nativamente la copia / incolla dell'immagine

— Romain Jouin
fonte

Preferisco questa opzione, poiché incorpora l'immagine nel file binario del notebook. Rende il notebook più pesante, ma non è necessario mantenere l'immagine nel relativo percorso.

— Tulio Casagrande,

8

Se si desidera visualizzare l'immagine in una cella Markdown, utilizzare:

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

Se si desidera visualizzare l'immagine in una cella di codice, utilizzare:

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

— seralouk
fonte

Nella cella di markdown, per me, funziona senza le virgole:<img src="files/image.png" width=800 height=400>

— Aerijman

è vero che le virgole non sono necessarie nei comandi HTML. vedi il mio aggiornamento

— seralouk

5

Modificare il blocco predefinito da "Codice" a "Markdown" prima di eseguire questo codice:

![<caption>](image_filename.png)

Se il file di immagine si trova in un'altra cartella, è possibile effettuare le seguenti operazioni:

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

— Jade Cacho
fonte

4

Per coloro che cercano dove posizionare il file immagine sulla macchina Jupyter in modo che possa essere mostrato dal file system locale.

Ho messo la mia mypic.pngin

/root/Images/mypic.png

(ovvero la cartella Immagini che viene visualizzata nel browser dei file online di Jupyter)

In tal caso, devo inserire la seguente riga nella cella Markdown per rendere visibile la mia foto nel blocco note:

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

— Sergey Shcherbakov
fonte

2

la risposta di minrk è giusta.

Tuttavia, ho scoperto che le immagini sembravano rotte in Print View (sul mio computer Windows che esegue la distribuzione Anaconda di IPython versione 0.13.2 in un browser Chrome)

La soluzione per questo era di usare <img src="../files/image.png"> invece.

Ciò ha fatto apparire l'immagine correttamente sia nella vista Stampa che nella normale vista di modifica di iPython.

AGGIORNAMENTO: dal mio aggiornamento a iPython v1.1.0 non c'è più bisogno di questa soluzione poiché la vista di stampa non esiste più. In effetti, è necessario evitare questa soluzione alternativa poiché impedisce allo strumento nbconvert di trovare i file.

— jlarchibald
fonte

-3

Puoi trovare la tua attuale directory di lavoro tramite il comando 'pwd' nel quaderno jupyter senza virgolette.

— Noman Nazir
fonte