267 votes

Insertion d'une image dans le markdown d'un notebook IPython

Je commence à dépendre fortement de l'application IPython notebook pour développer et documenter les algorithmes. C'est génial, mais il y a quelque chose qui semble être possible, mais je n'arrive pas à trouver comment le faire :

Je voudrais insérer une image locale dans le markdown de mon notebook IPython (local) pour faciliter la documentation d'un algorithme. J'en sais assez pour ajouter quelque chose comme <img src="image.png"> à la démarque, mais c'est à peu près tout ce que je sais. Je suppose que je pourrais placer l'image dans le répertoire représenté par 127.0.0.1:8888 (ou un sous-répertoire) pour pouvoir y accéder, mais je n'arrive pas à savoir où se trouve ce répertoire. (Je travaille sur un Mac.) Alors, est-il possible de faire ce que j'essaie de faire sans trop de problèmes ?

279voto

Philipp Schwarz Points 4503

La plupart des réponses données jusqu'à présent vont dans la mauvaise direction, suggérant de charger des bibliothèques supplémentaires et d'utiliser le code au lieu du balisage. Dans les Notebooks Ipython/Jupyter, c'est très simple. Assurez-vous que la cellule est bien dans le code et pour afficher une image, utilisez :

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

Autre avantage par rapport aux autres méthodes proposées : vous pouvez afficher tous les formats de fichiers courants, notamment jpg, png et gif (animations).

0 votes

Je suis curieux de savoir comment vous connaissez cette commande. Est-elle propre à Jupyter ou s'agit-il d'un langage (formatage latex, peut-être) que vous utilisez dans Jupyter pour ajouter l'image ?

2 votes

@ Alex G, Markdown est un langage dont la syntaxe de mise en forme du texte brut est conçue de manière à pouvoir être convertie en HTML et dans de nombreux autres formats. Markdown est souvent utilisé pour créer du texte riche en utilisant un éditeur de texte brut. Consultez le lien suivant pour apprendre la syntaxe : github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet

1 votes

@PhilippSchwarz existe-t-il des options dans votre exemple ci-dessus pour contrôler la taille de l'image "collée" ? En utilisant l'option <img...> ces options apparaissent approximativement comme ceci <img ... width="480"> .

247voto

minrk Points 10008

Les fichiers situés dans le répertoire du notebook sont disponibles sous une url "files/". Donc, s'il est dans le chemin de base, ce sera <img src="files/image.png"> et les sous-répertoires, etc. sont également disponibles : <img src="files/subdir/image.png"> etc.

Mise à jour : à partir d'IPython 2.0, l'option files/ n'est plus nécessaire (cf. notes de mise à jour ). Donc maintenant la solution <img src="image.png"> fonctionne simplement comme prévu.

0 votes

Qu'est-ce que le "répertoire du bloc-notes" ? Voulez-vous dire que l'image doit se trouver dans le même répertoire que le fichier *.ipynb ? J'ai essayé, mais ça n'a pas marché.

3 votes

Ah, vous utilisez probablement la version 0.12, n'est-ce pas ? Servir les fichiers locaux n'est actuellement disponible que dans master. Et oui, le "répertoire notebook" est le répertoire contenant les notebooks (fichiers .ipynb).

124 votes

Puisque vous êtes en markdown, pourquoi ne pas utiliser ![caption](files/image.png) ?

83voto

Gomes Points 419

J'utilise ipython 2.0, donc seulement deux lignes.

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

26 votes

Il s'agit de la manière correcte d'afficher une image dans un fichier de type code La réponse de Minrk est la manière correcte d'afficher une image dans une cellule de type Démarqueurs cellule.

3 votes

En utilisant jupyter notebook 4.2.0, l'image n'apparaît pas à moins que j'appelle display aussi : from IPython.display import Image, display; display(Image(filename='output1.png'))

44voto

Introduire une image dans Jupyter NB est une opération beaucoup plus simple que ce à quoi la plupart des gens ont fait allusion ici.

  1. Il suffit de créer une cellule Markdown vide.
  2. Ensuite, faites glisser et déposez le fichier image dans la cellule Markdown vide.

Le code Markdown qui permettra d'insérer l'image apparaît alors.

Par exemple, une chaîne de caractères mise en évidence en gris ci-dessous apparaîtra dans la cellule Jupyter :

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

  1. Ensuite, exécutez la cellule Markdown en appuyant sur Shift-Enter. Le serveur Jupyter va alors insérer l'image, et l'image apparaîtra alors.

J'exécute Jupyter notebook server is : 5.7.4 avec Python 3.7.0 sur Windows 7.

C'est tellement simple !

MISE À JOUR DU 18 mars 2021 : Cette méthode simple de "Drag-and-Drop-from-Windows-File-System" fonctionne toujours bien dans JupyterLab. JupyterLab insère le code HTML approprié pour intégrer l'image directement et de façon permanente dans le carnet de notes, de sorte que l'image est stockée dans le fichier .ipynb. J'utilise Jupyter Lab v2.2.7 sous Windows 10. Python 3.7.9 fonctionne toujours dans JupyterLab. J'utilise Jupyter Lab v2.2.7 avec Python 3.7.9 sous Windows 10.

Cela a cessé de fonctionner dans Jupyter Classic Notebook v6.1.5 l'année dernière. J'ai signalé un avis de bug aux développeurs de Jupyter Classic Notebook.

0 votes

Malheureusement, cette méthode ne fonctionne pas lorsque Jupyter Notebook version 6.0 est hébergé dans Google Cloud. Quelqu'un a-t-il une solution de contournement qui fonctionne sans privilèges d'administrateur, autre que l'installation de l'extension nbextension par glisser-déposer ?

1 votes

Je peux même faire un glisser-déposer de la machine locale vers mon ordinateur portable distant. Je vous remercie.

0 votes

Bien que je n'aie pas été en mesure (comme BND) de faire glisser une figure de mon ordinateur local vers un bloc-notes hébergé à distance, j'ai pu le faire lorsque j'hébergeais localement, et j'ai en outre confirmé que l'image réelle est intégrée au fichier du bloc-notes, de sorte que vous pouvez ensuite envoyer le fichier .ipynb à d'autres personnes et que le graphique sera préservé. La cellule markdown avec le graphique ressemble à quelque chose comme ceci dans un éditeur de texte simple (données d'image raccourcies ...) : { "attachments" : { "download.png" : { "image/png" : "iVBORw0KGgoAAAAN ... U5ErkJggg==" } },

27voto

Mike Points 359

[Obsolète]

IPython/Jupyter supporte désormais un module d'extension permettant d'insérer des images par copier-coller ou glisser-déposer.

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

L'extension "glisser-déposer" semble fonctionner dans la plupart des navigateurs.

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

Mais le copier-coller ne fonctionne que dans Chrome.

2 votes

Cette réponse a besoin de quelques votes positifs. Très peu connaissent les extensions Ipython.

0 votes

Je viens d'essayer le drag'n'drop dans Safari et Chrome, ça ne marche pas pour moi (OSX, Py3, toutes les mises à jour)

2 votes

Le deuxième lien que vous avez posté est cassé - l'extension n'est plus supportée ?

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X