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


304

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

Réponses:


306

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

8
Pour moi, cela ne fonctionne pas lors du téléchargement du bloc-notes au format html. Il montre un lien d'image cassé. Utilisation des IPython.display.Imagetravaux comme prévu.
joelostblom

7
@cheflo La syntaxe ci-dessus n'incorpore pas l'image dans le fichier html. Si vous regardez dans le code source du fichier html, vous trouverez une entrée comme <img src = "img / picture.png" alt = "title">. Pour voir l'image, vous devez la copier dans le dossier imgrelatif au fichier html.
Sebastian Stigler

1
Je soupçonnais que c'était le cas, merci d'avoir clarifié. Je pensais que cette différence entre les deux approches était inattendue et, au moins pour moi, déterminé laquelle choisir, alors je voulais attirer l'attention sur elle.
joelostblom

3
tout en le faisant via markdown, assurez-vous que le fichier image se trouve dans le même répertoire dans lequel se trouve votre ordinateur portable, pour une raison étrange (dans mon cas), jupyter-notebook n'a pas été convaincu d'agir sur le chemin complet ... ![title](picture.png)
Arun Kumar Khattri

2
@ArunKumarKhattri - a eu le même problème, seul le chemin relétif vers le cahier a fonctionné - dans mon cas
:! [Title

210

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


Il est vrai que la possibilité de redimensionner l'image est intéressante. Mais pour le rendu futur, le démarque est meilleur pour moi.
Ger

3
pouvez-vous en mettre un local avec un chemin absolu, via une démarque? j'ai essayé mais ça ne semble pas marcher. Edit: Firefox (et Chrome) n'autorisent pas l'accès aux fichiers locaux pour des
raisons de

2
@SwimBikeRun, vous devez sélectionner le bon type de cellule. votre type de cellule actuel doit être le code
youkaichao

1
Réponse sous-estimée. Très complet
Nathan

1
la version démarquage ne permet pas d' espaces dans les noms de fichiers, pour toute personne en cours d' exécution dans ce problème
CoffeeTableEspresso

58

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

3
Génial! Je préfère de beaucoup cette réponse car nous avons le contrôle sur la taille de sortie! C'est important par exemple lorsque vous utilisez l'outil Pelican pour publier un cahier jupyter en tant que pages html statiques.
Svend

7
HTML n'a pas besoin de virgules - il suffit de mettre un espace entre vos attributs - et il est recommandé de mettre des guillemets autour de toutes les valeurs d'attribut, par exemple width="60".
colllin

Saint sh * t. C'est super génial
Tessaracter

Oui c'est génial :) mais ... l'image est perdue dans les versions PDF. Dommage.
babou

21

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()

19

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

19

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

19

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é.


M'a sauvé !, Merci
Mohammad Heydari

Encore une autre fonctionnalité utile ajoutée par les développeurs de Jupyter. Un inconvénient à noter, pour les cas où cela est important: il inclurait l'image dans le IPyNB Jasoncode, la rendant ainsi beaucoup plus grande et non pas aussi facile à réviser (par exemple lors de l'inspection de diffs).
eldad-a

13

Voici comment vous pouvez le faire avec Markdown:

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

1
Pour certaines raisons, l'affichage d'images via markdown ne fonctionne pas pour moi ... Êtes-vous sûr que la syntaxe est correcte cristianmtr?
Reblochon Masque

1
Ouais, viens de le tester à nouveau. Voulez-vous vraiment définir la cellule sur Markdown? De plus, quelle version d'IPython / Jupyter utilisez-vous? Le mien dit: "La version du serveur de bloc-notes est 4.0.4 et fonctionne sur: Python 2.7.8 (par défaut, 30 juin 2014, 16:08:48) [MSC v.1500 64 bits (AMD64)]" Voici un capture d'écran avec les résultats: i.imgur.com/4ISJFDE.png
cristianmtr

méfiez-vous des chemins, ce qui fonctionne localement ne fonctionne pas en ligne, .e. imgs \ pic.png fonctionne localement, alors qu'en ligne il est 1: sensible à la casse (Pic.png) 2: la barre oblique inverse et la barre oblique ne sont pas les mêmes ...: / -
Intelligent-Infrastructure

Fonctionne très bien dans Python 3.8. Merci
jamescampbell

Aucun espace n'est autorisé dans le nom de fichier pour la démarque, au cas où quelqu'un d'autre rencontrerait ce problème
CoffeeTableEspresso

12
  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)

  1. 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


1
Oui bat quand je veux télécharger en HTML, j'obtiens l'erreur "nbconvert a échoué: pièce jointe manquante: imagen.png". Pourquoi?
efueyo

Coller une image du presse-papiers fonctionne également pour moi (après avoir défini le mode cellulaire sur Markdown)
CgodLEY

10

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.


Il semble que l'option ait valueété renommée dataentre-temps. Pour une image stockée localement, le code a Image(data=open(filename_png, 'rb').read())fonctionné pour moi.
jottbe

7

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 ne fonctionne que pour moi. Merci! "ShowMyImage" fonctionne comme un charme!
Pranzell

4

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)

En quoi diffère-t-elle de la réponse de Sebastian Stigler?
iNet

1
Je voulais juste souligner que cela fonctionnait pour moi sans inclure le titre dans le crochet carré. Rien de différent.
Pranav Pandit

2

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.


0

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

0

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==)

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.