Come incorporare l'immagine o l'immagine nel quaderno jupyter, da un computer locale o da una risorsa Web?

Vorrei includere l'immagine in un quaderno jupyter.

Se ho fatto quanto segue, funziona:

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

Ma vorrei includere le immagini in una cella di markdown e il codice seguente restituisce un errore 404:

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

Ho anche provato

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

Ma ottengo ancora lo stesso errore:

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

Non è necessario utilizzare le virgolette attorno al nome dei file di immagine in markdown!

Se leggi attentamente il tuo messaggio di errore, vedrai le due %22parti nel link. Questa è la virgoletta codificata HTML.

Devi cambiare la linea

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

per

![title](img/picture.png)

AGGIORNARE

Si presume che si disponga della seguente struttura di file e che si esegua il jupyter notebookcomando nella directory in cui example.ipynbè memorizzato il file (<- contiene il markdown per l'immagine):

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

Esistono diversi modi per pubblicare un'immagine nei blocchi note Jupyter:

via HTML:

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

Hai la possibilità di utilizzare i tag HTML per ridimensionare, ecc ...

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

È inoltre possibile visualizzare le immagini memorizzate localmente, tramite percorso relativo o assoluto.

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

se l'immagine è più ampia delle impostazioni di visualizzazione: grazie

usare unconfined=Trueper disabilitare il confinamento di larghezza massima dell'immagine

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

o tramite markdown:

• assicurati che la cella sia una cella di markdown e non una cella di codice, grazie @ 游 凯 超 nei commenti)
• Si noti che su alcuni sistemi, il markdown non consente spazi bianchi nei nomi dei file. Grazie a @CoffeeTableEspresso e @zebralamy nei commenti)
  (Su macos, finché sei su una cella di markdown faresti così: ![title](../image 1.png)e non preoccuparti dello spazio bianco).

per un'immagine web:

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

come mostrato da @cristianmtr Prestando attenzione a non utilizzare queste citazioni ""o quelle ''intorno all'URL.

o locale:

![title](img/picture.png)

dimostrato da @Sebastian

In alternativa, puoi usare un semplice HTML <img src>, che ti permette di cambiare altezza e larghezza e viene comunque letto dall'interprete markdown:

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

So che questo non è pienamente pertinente, ma poiché questa risposta viene classificata per prima molte volte quando si cerca " come visualizzare immagini in Jupyter ", si prega di considerare anche questa risposta.

È possibile utilizzare matplotlib per mostrare un'immagine come segue.

import matplotlib.pyplot as plt
import matplotlib.image as mpimg
image = mpimg.imread("your_image.png")
plt.imshow(image)
plt.show()

Sono sorpreso che nessuno qui abbia menzionato l'opzione di magia cellulare html. dai documenti (IPython, ma lo stesso per Jupyter)

%% html

Render the cell as a block of HTML

Oltre alle altre risposte usando HTML (in Markdown o usando la %%HTMLmagia:

Se è necessario specificare l'altezza dell'immagine, questo non funzionerà:

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

Questo perché usa lo stile CSS in Jupyter height: auto per impostazione predefinita per i imgtag, che sovrascrive l'attributo HTML height. È invece necessario sovrascrivere l' heightattributo CSS :

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

Inserisci l'immagine direttamente nel quaderno Jupyter.

Nota: è necessario disporre di una copia locale dell'immagine sul computer

È possibile inserire l'immagine nel taccuino Jupyter stesso. In questo modo non è necessario mantenere l'immagine separatamente nella cartella.

passi:

1. Converti la cella in markdownda:

   • premendo M sulla cella selezionata
     O
     
   • Dalla barra dei menu, Cella> Tipo di cella> Markdown.
     ( Nota: è importante convertire la cella in Markdown, altrimenti l'opzione "Inserisci immagine" al passaggio 2 non sarà attiva)

2. Ora vai alla barra dei menu e seleziona Modifica -> Inserisci immagine.

3. Seleziona l'immagine dal tuo disco e carica.

4. Premi Ctrl+ Entero Shift+Enter .

Questo renderà l'immagine come parte del notebook e non è necessario caricarla nella directory o in Github. Ritengo che questo appaia più pulito e non soggetto a problemi di URL non funzionanti.

Ecco come puoi farlo con Markdown:

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

1. Imposta la modalità cella su Markdown
2. Trascina e rilascia l'immagine nella cella. Verrà creato il seguente comando:

![image.png](attachment:image.png)

3. Esegui / Esegui la cella e l'immagine appare.

L'immagine è effettivamente incorporata nel Notebook ipynb e non è necessario pasticciare con file separati. Purtroppo questo non funziona ancora con Jupyter-Lab (v 1.1.4).

Modifica: funziona in JupyterLab versione 1.2.6

Se vuoi usare l'API Jupyter Notebook (e non più quella di IPython), trovo il sotto-progetto Jupyter di ipywidgets. Hai un Imagewidget. Docstring specifica che hai un valueparametro che è un byte. Quindi puoi fare:

import requests
from ipywidgets import Image

Image(value=requests.get('https://octodex.github.com/images/yaktocat.png').content)

Sono d'accordo, è più semplice usare lo stile Markdown. Ma ti mostra l'API Notebook con visualizzazione delle immagini. Puoi anche ridimensionare l'immagine con i parametri widthe height.

Ecco una soluzione per Jupyter e Python3 :

Ho lasciato cadere le mie immagini in una cartella denominata ImageTest. La mia directory è:

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

Per mostrare l'immagine ho usato questa espressione:

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

Fai attenzione anche a /e\

Questo funziona per me in una cella di markdown. In qualche modo non ho bisogno di menzionare specificamente se si tratta di un'immagine o di un semplice file.

![](files/picture.png)

Una cosa che ho scoperto è che il percorso della tua immagine deve essere relativo al punto in cui il notebook è stato originariamente caricato. se esegui il cd in una directory diversa, ad esempio Immagini, il percorso di Markdown è ancora relativo alla directory di caricamento originale.

D'accordo, ho avuto gli stessi problemi e questo è ciò che ha funzionato e cosa no:

WORKED: <img src="Docs/pinoutDOIT32devkitv1.png" width="800"/>
*DOES NOT WORK: <img src="/Docs/pinoutDOIT32devkitv1.png" width="800"/>
DOES NOT WORK: <img src="./Docs/pinoutDOIT32devkitv1.png" width="800"/>*

Mentre molte delle risposte di cui sopra danno modo di incorporare un'immagine usando un file o con il codice Python, c'è un modo per incorporare un'immagine nel taccuino jupyter stesso usando solo markdown e base64!

Per visualizzare un'immagine nel browser, è possibile visitare il collegamento data:image/png;base64,**image data here**per un'immagine PNG con codifica base64 o data:image/jpg;base64,**image data here**per un'immagine JPG con codifica base64. Un link di esempio può essere trovato alla fine di questa risposta.

Per incorporarlo in una pagina di markdown, usa semplicemente un costrutto simile come risposta del file, ma con un link base64 invece: ![**description**](data:image/**type**;base64,**base64 data**) . Ora la tua immagine è incorporata al 100% nel tuo file Jupyter Notebook!

Link di esempio: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABHNCSVQICAgIfAhkiAAAAD9JREFUGJW1jzEOADAIAqHx/1+mE4ltNXEpI3eJQknCIGsiHSLJB+aO/06PxOo/x2wBgKR2jCeEy0rOO6MDdzYQJRcVkl1NggAAAABJRU5ErkJggg==

Esempio di markdown: ![smile](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABHNCSVQICAgIfAhkiAAAAD9JREFUGJW1jzEOADAIAqHx/1+mE4ltNXEpI3eJQknCIGsiHSLJB+aO/06PxOo/x2wBgKR2jCeEy0rOO6MDdzYQJRcVkl1NggAAAABJRU5ErkJggg==)