Comment inclure une image dans le carnet de notes de jupyter
j'aimerais inclure une image dans un carnet jupyter.
si j'ai fait ce qui suit, ça marche:
from IPython.display import Image
Image("img/picture.png")
mais je voudrais inclure les images dans une cellule markdown et le code suivant donne une erreur 404:
![title]("img/picture.png")
j'ai aussi essayé
![texte]("http://localhost:8888/img/picture.png")
Mais j'obtiens 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
9 réponses
vous ne devez pas utiliser de guillemets autour du nom des fichiers image dans markdown!
si vous lisez attentivement votre message d'erreur, vous verrez les deux parties %22 dans le lien. C'est la marque de citation codée html.
vous devez changer la ligne
![title]("img/picture.png")
à
mise à JOUR
Il est supposé, que vous avez la suivant la structure du fichier et que vous exécutez la commande jupyter notebook dans le répertoire où le fichier example.ipynb (<--contient le markdown pour l'image) est stocké:
/
+-- example.ipynb
+-- img
+-- picture.png
il y a plusieurs façons de poster une image dans les carnets 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, soit via le 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=True pour désactiver le confinement de largeur maximale 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 markdown:
(assurez-vous que la cellule est une cellule de markdown, et pas une cellule de code, merci @փ dans les commentaires)
pour une image web:
comme le montre @cristianmtr
Attention à ne pas utiliser ces guillemets "" ou ceux '' autour de l'url.
ou un local:
démontré par @Sebastian
alternativement, vous pouvez utiliser un HTML simple <img src> , qui vous permet de changer la hauteur et la largeur et est toujours lu par l'interpréteur markdown:
<img src="subdirectory/MyImage.png",width=60,height=60>
Voici comment vous pouvez le faire avec Markdown:
si vous voulez utiliser L'API de bloc-notes de Jupyter (et non plus celle D'IPython), je trouve le ipywidgets sous-projet de Jupyter. Vous avez un widget Image . Docstring spécifie que vous avez un paramètre value qui est un byte. Donc vous pouvez faire:
import requests
from ipywidgets import Image
Image(value=requests.get('https://octodex.github.com/images/yaktocat.png').content)
je suis d'accord, c'est plus simple d'utiliser le style Markdown. Mais il vous montre L'API D'affichage D'image Bloc-notes. Vous pouvez également redimensionner l'image avec le width et height paramètres.
je suis surpris que personne ici n'ait mentionné l'option magique de la cellule html. de la docs (IPython, mais même pour Jupyter)
% % html
Render the cell as a block of HTML
Voici une Solution pour Jupyter et Python3 :
j'ai déposé mes images dans un dossier nommé ImageTest .
Mon répertoire est:
C:\Users\MyPcName\ImageTest\image.png
pour montrer l'image que j'ai utilisé cette expression:
aussi attention à / et \
ça marche pour moi dans une cellule de markdown. D'une façon ou d'une autre, je n'ai pas besoin de mentionner spécifiquement si c'est une image ou un simple fichier.
en plus des autres réponses en utilisant HTML (soit dans Markdown ou en utilisant le %%HTML magic:
si vous devez spécifier la hauteur de l'image, cela ne fonctionnera pas:
<img src="image.png" height=50> <-- will not work
c'est parce que le style CSS de Jupyter utilise height: auto par défaut pour les tags img , qui l'emporte sur L'attribut HTML height. Vous devez écraser l'attribut CSS height à la place:
<img src="image.png" style="height:50px"> <-- works