Comment intégrer une image ou une image dans un ordinateur portable jupyter, à partir d'une machine locale ou d'une ressource Web?

Je voudrais inclure une image dans un cahier jupyter.

Si j'ai fait ce qui suit, cela fonctionne:

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

Mais je voudrais inclure les images dans une cellule de démarque et le code suivant donne une erreur 404:

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

J'ai aussi essayé

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

Mais je reçois toujours la même erreur:

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

Vous ne devez pas utiliser de guillemets autour du nom des fichiers image dans la démarque!

Si vous lisez attentivement votre message d'erreur, vous verrez les deux %22parties dans le lien. C'est le guillemet codé html.

Vous devez changer de ligne

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

à

![title](img/picture.png)

METTRE À JOUR

Il est supposé que vous avez la structure de fichiers suivante et que vous exécutez la jupyter notebookcommande dans le répertoire où le fichier example.ipynb(<- contient la démarque pour l'image) est stocké:

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

Il existe plusieurs façons de publier une image dans les blocs-notes Jupyter:

via HTML:

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

Vous conservez la possibilité d'utiliser des balises HTML pour redimensionner, etc ...

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

Vous pouvez également afficher des images stockées localement, via un chemin relatif ou absolu.

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

si l'image est plus large que les paramètres d'affichage: merci

utiliser unconfined=Truepour désactiver le confinement max-largeur de l'image

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

ou via démarque:

• assurez-vous que la cellule est une cellule de démarque, et non une cellule de code, merci @ 游 凯 超 dans les commentaires)
• Veuillez noter que sur certains systèmes, la démarque n'autorise pas d'espace blanc dans les noms de fichiers. Merci à @CoffeeTableEspresso et @zebralamy dans les commentaires)
  (Sur les macos, tant que vous êtes sur une cellule de démarque, vous feriez comme ceci :, ![title](../image 1.png)et ne vous inquiétez pas pour l'espace blanc).

pour une image web:

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

comme indiqué par @cristianmtr Attention à ne pas utiliser ces guillemets ""ou ceux ''autour de l'url.

ou local:

![title](img/picture.png)

démontré par @Sebastian

Alternativement, vous pouvez utiliser un code HTML simple <img src>, qui vous permet de modifier la hauteur et la largeur et qui est toujours lu par l'interpréteur de marquage:

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

Je sais que ce n'est pas entièrement pertinent, mais puisque cette réponse est classée plusieurs fois en premier lorsque vous recherchez « comment afficher des images dans Jupyter », veuillez également considérer cette réponse.

Vous pouvez utiliser matplotlib pour afficher une image comme suit.

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

Je suis surpris que personne ici n'ait mentionné l'option de magie cellulaire html. à partir des documents (IPython, mais même pour Jupyter)

%% html

Render the cell as a block of HTML

En plus des autres réponses utilisant HTML (soit dans Markdown soit en utilisant la %%HTMLmagie:

Si vous devez spécifier la hauteur de l'image, cela ne fonctionnera pas:

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

En effet, le style CSS dans Jupyter utilise height: autopar défaut pour les imgbalises, ce qui remplace l'attribut de hauteur HTML. Vous devez remplacer l’ heightattribut CSS à la place:

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

Insérez l'image directement dans le cahier Jupyter.

Remarque: Vous devez avoir une copie locale de l'image sur votre ordinateur

Vous pouvez insérer l'image dans le bloc-notes Jupyter lui-même. De cette façon, vous n'avez pas besoin de conserver l'image séparément dans le dossier.

Pas:

1. Convertissez la cellule markdownen:

   • en appuyant sur M sur la cellule sélectionnée
     OU
     
   • Dans la barre de menus, Cellule> Type de cellule> Markdown.
     ( Remarque: il est important de convertir la cellule en Markdown, sinon l'option "Insérer une image" à l'étape 2 ne sera pas active)

2. Maintenant, allez dans la barre de menus et sélectionnez Modifier -> Insérer une image.

3. Sélectionnez l'image sur votre disque et téléchargez.

4. Appuyez sur Ctrl+ Enterou Shift+ Enter.

Cela fera de l'image une partie du bloc-notes et vous n'avez pas besoin de le télécharger dans le répertoire ou Github. Je pense que cela semble plus propre et non sujet à un problème d'URL cassé.

Voici comment vous pouvez le faire avec Markdown:

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

1. Définir le mode de cellule sur Markdown
2. Faites glisser et déposez votre image dans la cellule. La commande suivante sera créée:

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

3. Exécutez / exécutez la cellule et l'image s'affiche.

L'image est en fait intégrée dans le bloc-notes ipynb et vous n'avez pas besoin de jouer avec des fichiers séparés. Cela ne fonctionne malheureusement pas encore avec Jupyter-Lab (v 1.1.4).

Edit: fonctionne dans JupyterLab version 1.2.6

Si vous souhaitez utiliser l'API Jupyter Notebook (et non plus celle d'IPython), je trouve le sous-projet ipywidgets Jupyter. Vous avez un Imagewidget. Docstring spécifie que vous avez un valueparamètre qui est un octet. Vous pouvez donc faire:

import requests
from ipywidgets import Image

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

Je suis d'accord, il est plus simple d'utiliser le style Markdown. Mais il vous montre l'API Notebook d'affichage d'image. Vous pouvez également redimensionner l'image avec les paramètres widthet height.

Voici une solution pour Jupyter et Python3 :

J'ai déposé mes images dans un dossier nommé ImageTest. Mon annuaire est:

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

Pour montrer l'image, j'ai utilisé cette expression:

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

Faites également attention /et\

Cela fonctionne pour moi dans une cellule de démarque. D'une certaine manière, je n'ai pas besoin de mentionner spécifiquement s'il s'agit d'une image ou d'un simple fichier.

![](files/picture.png)

Une chose que j'ai trouvée est que le chemin de votre image doit être relatif à l'endroit où le bloc-notes a été initialement chargé. si vous cd dans un répertoire différent, tel que Pictures, votre chemin Markdown est toujours relatif au répertoire de chargement d'origine.

D'accord, j'ai eu les mêmes problèmes et c'est ce qui a fonctionné et ce qui n'a pas fonctionné:

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"/>*

Alors que la plupart des réponses ci-dessus donnent des moyens d'incorporer une image à l'aide d'un fichier ou avec du code Python, il existe un moyen d'incorporer une image dans le bloc-notes jupyter lui-même en utilisant uniquement markdown et base64!

Pour afficher une image dans le navigateur, vous pouvez visiter le lien data:image/png;base64,**image data here**pour une image PNG encodée en base64, ou data:image/jpg;base64,**image data here**pour une image JPG encodée en base64. Un exemple de lien se trouve à la fin de cette réponse.

Pour intégrer cela dans une page Markdown, il suffit d' utiliser une construction similaire que les réponses de fichiers, mais avec un lien base64 à la place: ![**description**](data:image/**type**;base64,**base64 data**). Maintenant, votre image est 100% intégrée dans votre fichier Notebook Jupyter!

Exemple de lien: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABHNCSVQICAgIfAhkiAAAAD9JREFUGJW1jzEOADAIAqHx/1+mE4ltNXEpI3eJQknCIGsiHSLJB+aO/06PxOo/x2wBgKR2jCeEy0rOO6MDdzYQJRcVkl1NggAAAABJRU5ErkJggg==

Exemple de démarque: ![smile](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABHNCSVQICAgIfAhkiAAAAD9JREFUGJW1jzEOADAIAqHx/1+mE4ltNXEpI3eJQknCIGsiHSLJB+aO/06PxOo/x2wBgKR2jCeEy0rOO6MDdzYQJRcVkl1NggAAAABJRU5ErkJggg==)