Insertion d'une image dans la démarque du bloc-notes IPython

217

Je commence à dépendre fortement de l'application bloc-notes IPython pour développer et documenter des algorithmes. C'est génial; mais il semble que cela devrait être possible, mais je ne sais pas comment le faire:

Je voudrais insérer une image locale dans ma démarque (locale) IPython pour aider à documenter un algorithme. J'en sais assez pour ajouter quelque chose comme <img src="image.png">à la démarque, mais c'est à peu près autant que je sache. Je suppose que je pourrais mettre 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 ne peux pas comprendre 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?

— benpro
source

201

Les fichiers à l'intérieur du répertoire du carnet sont disponibles sous une URL "files /". Donc, si c'est dans le chemin de base, ce serait le cas <img src="files/image.png">, et des sous-répertoires, etc. sont également disponibles:, <img src="files/subdir/image.png">etc.

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

— minrk
source

3

Ah, vous utilisez probablement 0,12, n'est-ce pas? La gestion des fichiers locaux n'est actuellement disponible que dans master. Et oui, le "répertoire notebook" est le répertoire des notebooks (fichiers .ipynb).

— minrk

107

Puisque vous êtes en démarque, pourquoi ne pas l'utiliser ![caption](files/image.png)?

— kynan

4

@minrk: cela ne fonctionne pas pour moi. J'ai mis "<img src =" k.png ">", mais cela ne montre rien. k.png se trouve dans le même dossier que celui du fichier notebook.

— Abid Rahman K

4

Veuillez relire la réponse et les commentaires. Votre URL commencera toujours par «fichiers /», donc si vous avez à k.pngcôté de votre bloc-notes, l'URL serait src="files/k.png".

— minrk

2

vous devez actualiser une page Web pour que les images d'une URL donnée soient rechargées.

— minrk

230

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 ordinateurs portables Ipython / Jupyter, c'est très simple. Assurez-vous que la cellule est bien en balisage et pour afficher une image, utilisez:

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

Un autre avantage par rapport aux autres méthodes proposées est que vous pouvez afficher tous les formats de fichiers courants, y compris jpg, png et gif (animations).

— Philipp Schwarz
source

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

— Alex G

1

@ Alex G, Markdown est un langage avec une syntaxe de formatage de texte brut conçue pour pouvoir être convertie en HTML et dans de nombreux autres formats. Markdown est souvent utilisé pour créer du texte riche à l'aide d'un éditeur de texte brut. Consultez le lien suivant pour en apprendre la syntaxe: github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet

— Philipp Schwarz

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

— Reb.Cabin

1

Cela n'a pas fonctionné. Notebook cherchait dans un emplacement spécifique / notebooks / <mon chemin de travail ajouté ici> - ce n'est sûrement pas root - et le chemin local n'existait pas. J'ai trouvé utile d'utiliser simplement l' image d'insertion de bloc-notes - qui a ajouté l'image en tant que pièce jointe (qui est maintenant portable).

— Mark

2

Existe-t-il un moyen d'utiliser cette méthode avec des fichiers image qui ont de l'espace dans leurs noms?

— zebralamy

78

J'utilise ipython 2.0, donc juste deux lignes.

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

— Gomes
source

25

C'est la bonne façon d'afficher une image dans une cellule de code . La réponse de minrk est la bonne façon d'afficher une image dans une cellule de démarque .

— Mike

3

En utilisant jupyter notebook 4.2.0, il n'apparaît pas l'image sauf si j'appelle displayaussi: from IPython.display import Image, display; display(Image(filename='output1.png'))

— Matteo T.

22

[Obsolète]

IPython / Jupyter prend désormais en charge les modules d'extension qui peuvent insérer des images via 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.

— Mike
source

1

Cette réponse nécessite quelques votes positifs. Très peu connaissent les extensions Ipython.

— Thoran

vient d'essayer drag'n'drop dans Safari et Chrome, ne fonctionne pas pour moi (OSX, Py3, toutes les mises à jour)

— K.-Michael Aye

2

Le deuxième lien que vous avez publié est rompu - l'extension n'est plus prise en charge?

— zthomas.nc

Je ne trouve plus non plus l'extension.

— yerforkferchips

Oui, Jupyter a évolué un peu au cours des trois dernières années et cette réponse est assez obsolète.

— Mike

18

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

1) Créez simplement une cellule Markdown vide. 2) Faites ensuite glisser-déposer le fichier image dans la cellule Markdown vide.

Le code Markdown qui insérera l'image apparaît alors.

Par exemple, une chaîne représentée en gris ci-dessous apparaîtra dans la cellule Jupyter:

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

3) Exécutez ensuite la cellule Markdown en appuyant sur Shift-Enter. Le serveur Jupyter insérera alors l'image, puis l'image apparaîtra.

J'utilise le serveur de portables Jupyter: 5.7.4 avec Python 3.7.0 sous Windows 7.

C'est tellement simple !!

— Rich Lysakowski PhD
source

2

C'est vraiment la meilleure solution que j'ai trouvée !!

— GCGM

Malheureusement, cette méthode ne fonctionne pas lorsque Jupyter Notebook version 6.0 est hébergé dans Google Cloud. N'importe qui a une solution de contournement qui fonctionne sans privilèges d'administrateur, quelque chose en plus d'installer la nbextension glisser-déposer?

— Rich Lysakowski PhD

13

J'ai mis le bloc-notes IPython dans le même dossier que l'image. J'utilise Windows. Le nom de l'image est "phuong huong xac dinh.PNG".

Dans Markdown:

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

Code:

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

— hydroman
source

1

référence de la documentation ipython.readthedocs.io/en/stable/api/generated/… , bien que l'utilisation de la démarque ( ![alt text](foo.png "the title")soit à mon humble avis préférable, sauf si l'utilisation d'arguments supplémentaires depuis l'api est requise.

— michael

9

Assurez-vous d'abord que vous êtes dans le modèle d'édition de démarque dans la cellule du bloc-notes ipython

C'est une alternative à la méthode proposée par d'autres <img src="myimage.png">:

![title](img/picture.png)

Il semble également fonctionner si le titre manque:

![](img/picture.png)

Notez qu'aucune citation ne doit figurer dans le chemin. Je ne sais pas si cela fonctionne pour les chemins avec des espaces blancs!

— tsando
source

1

Pour moi, les images avec des espaces blancs dans le nom n'étaient pas rendues dans le cahier. J'ai supprimé les espaces, je peux voir maintenant.

— insanely_sin

9

La dernière version du carnet jupyter accepte le copier / coller de l'image en mode natif

— Romain Jouin
source

Je préfère cette option, car elle incorpore l'image dans le binaire du bloc-notes. Cela alourdit le bloc-notes, mais vous n'avez pas besoin de conserver l'image dans le chemin relatif.

— Tulio Casagrande

8

Si vous souhaitez afficher l'image dans une cellule Markdown, utilisez:

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

Si vous souhaitez afficher l'image dans une cellule Code, utilisez:

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

— seralouk
source

Dans la cellule de démarque, pour moi, fonctionne sans les virgules:<img src="files/image.png" width=800 height=400>

— aerijman

il est vrai que les virgules ne sont pas nécessaires dans les commandes HTML. voir ma mise à jour

— seralouk

5

Changez le bloc par défaut de "Code" en "Markdown" avant d'exécuter ce code:

![<caption>](image_filename.png)

Si le fichier image se trouve dans un autre dossier, vous pouvez effectuer les opérations suivantes:

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

— Jade Cacho
source

4

Pour ceux qui cherchent où placer le fichier image sur la machine Jupyter afin qu'il puisse être affiché à partir du système de fichiers local.

Je mets mon mypic.pngen

/root/Images/mypic.png

(c'est le dossier Images qui apparaît dans le navigateur de fichiers en ligne Jupyter)

Dans ce cas, je dois mettre la ligne suivante dans la cellule Markdown pour faire apparaître ma photo dans le bloc-notes:

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

— Sergey Shcherbakov
source

2

la réponse de minrk est juste.

Cependant, j'ai trouvé que les images semblaient cassées dans la vue d'impression (sur ma machine Windows exécutant la distribution Anaconda d'IPython version 0.13.2 dans un navigateur Chrome)

La solution de contournement était d'utiliser à la <img src="../files/image.png">place.

Cela a fait apparaître l'image correctement à la fois dans la vue d'impression et dans la vue d'édition iPython normale.

MISE À JOUR: depuis ma mise à niveau vers iPython v1.1.0, il n'y a plus besoin de cette solution de contournement puisque la vue d'impression n'existe plus. En fait, vous devez éviter cette solution de contournement car elle empêche l'outil nbconvert de trouver les fichiers.

— jlarchibald
source

-3

Vous pouvez trouver votre répertoire de travail actuel par la commande 'pwd' dans le cahier jupyter sans guillemets.

— Noman Nazir
source