Wie kann ich ein Bild oder ein Bild in ein Jupyter-Notizbuch einbetten, entweder von einem lokalen Computer oder von einer Webressource?

304

Ich möchte ein Bild in ein Jupyter-Notizbuch aufnehmen.

Wenn ich Folgendes getan habe, funktioniert es:

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

Ich möchte die Bilder jedoch in eine Markdown-Zelle aufnehmen, und der folgende Code gibt einen 404-Fehler aus:

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

Ich habe es auch versucht

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

Aber ich bekomme immer noch den gleichen Fehler:

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

Antworten:

306

Sie dürfen keine Anführungszeichen um den Namen der Bilddateien in Markdown verwenden!

Wenn Sie Ihre Fehlermeldung sorgfältig lesen, werden die beiden %22Teile im Link angezeigt. Das ist das HTML-codierte Anführungszeichen.

Sie müssen die Zeile ändern

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

zu

![title](img/picture.png)

AKTUALISIEREN

Es wird davon ausgegangen, dass Sie die folgende Dateistruktur haben und den jupyter notebookBefehl in dem Verzeichnis ausführen, in dem die Datei example.ipynb(<- enthält den Abschlag für das Bild) gespeichert ist:

/
+-- example.ipynb
+-- img
    +-- picture.png
Sebastian Stigler
quelle
8
Für mich funktioniert dies nicht, wenn ich das Notebook als HTML herunterlade. Es zeigt einen defekten Bildlink. Verwendung IPython.display.Imagefunktioniert wie erwartet.
Joelostblom
7
@cheflo Die obige Syntax bettet das Bild nicht in die HTML-Datei ein. Wenn Sie im Quellcode der HTML-Datei suchen, finden Sie einen Eintrag wie <img src = "img / picture.png" alt = "title">. Um das Bild zu sehen, müssen Sie es in den Ordner imgrelativ zur HTML-Datei kopieren .
Sebastian Stigler
1
Ich vermutete, dass dies der Fall war, danke für die Klarstellung. Ich dachte, dieser Unterschied zwischen den beiden Ansätzen sei unerwartet und entschied zumindest für mich, welchen ich wählen sollte, also wollte ich darauf aufmerksam machen.
Joelostblom
3
Stellen Sie dabei sicher, dass sich die Bilddatei in demselben Verzeichnis befindet, in dem sich Ihr Notizbuch befindet. Aus irgendeinem seltsamen Grund (in meinem Fall) war jupyter-notebook nicht davon überzeugt, auf dem vollen Weg zu handeln ... ![title](picture.png)
Arun Kumar Khattri
2
@ArunKumarKhattri - hatte das gleiche Problem, nur reletive Pfad zum Notizbuch funktioniert - in meinem Fall :! [Titel] (../ img / picture.png)
ohad edelstain
209

Es gibt verschiedene Möglichkeiten, ein Bild in Jupyter-Notizbüchern zu veröffentlichen:

via HTML:

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

Sie behalten die Möglichkeit, HTML-Tags zum Ändern der Größe usw. zu verwenden.

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

Sie können auch lokal gespeicherte Bilder entweder über den relativen oder den absoluten Pfad anzeigen.

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

Wenn das Bild breiter als die Anzeigeeinstellungen ist: Danke

Verwenden Sie unconfined=Truediese Option, um die Beschränkung der maximalen Breite des Bildes zu deaktivieren

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

oder per Markdown:

  • Stellen Sie sicher, dass die Zelle eine Markdown-Zelle und keine Codezelle ist, danke @ 游 凯 超 in den Kommentaren)
  • Bitte beachten Sie, dass auf einigen Systemen der Markdown keine Leerzeichen in den Dateinamen zulässt. Dank @CoffeeTableEspresso und @zebralamy in den Kommentaren)
    (On macos, solange Sie auf einem Abschlags Zelle sind Sie so tun würde: ![title](../image 1.png), und sich keine Sorgen über den weißen Raum).

für ein Webbild:

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

wie von @cristianmtr gezeigt Achten Sie darauf, weder diese Anführungszeichen ""noch die ''um die URL herum zu verwenden.

oder eine lokale:

![title](img/picture.png)

demonstriert von @Sebastian

Reblochon-Maske
quelle
Es ist wahr, dass die Möglichkeit, die Bildgröße zu ändern, interessant ist. Aber für zukünftiges Rendern ist Markdown für mich besser.
Ger
3
Kannst du einen lokalen mit absolutem Pfad über Markdown setzen? Ich habe es versucht, aber es scheint nicht zu funktionieren. Bearbeiten: Firefox (und Chrome) erlauben aus Sicherheitsgründen keinen Zugriff auf lokale Dateien
Ciprian Tomoiagă
2
@SwimBikeRun sollten Sie den richtigen Zelltyp auswählen. Ihr aktueller Zelltyp muss Code sein
youkaichao
1
Unterschätzte Antwort. Sehr gründlich
Nathan
1
Die Markdown-Version erlaubt keine Leerzeichen in Dateinamen, wenn jemand auf dieses Problem
stößt
57

Alternativ können Sie einen einfachen HTML-Code verwenden <img src>, mit dem Sie Höhe und Breite ändern können und der weiterhin vom Markdown-Interpreter gelesen wird:

<img src="subdirectory/MyImage.png" width=60 height=60 />
Alistair
quelle
3
Großartig! Ich bevorzuge diese Antwort sehr, da wir die Kontrolle über die Ausgabegröße haben! Dies ist beispielsweise wichtig, wenn Sie das Pelican-Tool zum Veröffentlichen von Jupyter-Notizbüchern als statische HTML-Seiten verwenden.
Svend
7
HTML benötigt keine Kommas - setzen Sie einfach ein Leerzeichen zwischen Ihre Attribute - und es wird empfohlen, alle Attributwerte in Anführungszeichen zu setzen, z width="60".
Colllin
Heiliger Scheiß. Das ist super genial
Tessaracter
Ja, es ist großartig :) aber ... das Bild geht in PDF-Versionen verloren. Schade.
Babou
21

Ich weiß, dass dies nicht vollständig relevant ist, aber da diese Antwort bei der Suche nach "Anzeigen von Bildern in Jupyter " häufig an erster Stelle steht , sollten Sie auch diese Antwort berücksichtigen.

Sie können matplotlib verwenden, um ein Bild wie folgt anzuzeigen.

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

Ich bin überrascht, dass hier niemand die magische Option für HTML-Zellen erwähnt hat. aus den Dokumenten (IPython, aber das gleiche für Jupyter)

%% html

Render the cell as a block of HTML
Malik A. Rumi
quelle
19

Zusätzlich zu den anderen Antworten mit HTML (entweder in Markdown oder mit der %%HTMLMagie:

Wenn Sie die Bildhöhe angeben müssen, funktioniert dies nicht:

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

Dies liegt daran, dass das CSS-Styling in Jupyter height: autostandardmäßig für die imgTags verwendet wird, wodurch das HTML- Höhenattribut überschrieben wird. Sie müssen heightstattdessen das CSS- Attribut überschreiben :

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

Fügen Sie das Bild direkt in das Jupyter-Notizbuch ein.

Hinweis: Sie sollten eine lokale Kopie des Bildes auf Ihrem Computer haben

Sie können das Bild in das Jupyter-Notizbuch selbst einfügen. Auf diese Weise müssen Sie das Bild nicht separat im Ordner aufbewahren.

Schritte:

  1. Konvertieren Sie die Zelle in markdown:

    • Drücken Sie M in der ausgewählten Zelle
      ODER
    • Wählen Sie in der Menüleiste Zelle> Zelltyp> Markdown.
      ( Hinweis: Es ist wichtig, die Zelle in Markdown zu konvertieren, da sonst die Option "Bild einfügen" in Schritt 2 nicht aktiv ist.)
  2. Gehen Sie nun zur Menüleiste und wählen Sie Bearbeiten -> Bild einfügen.

  3. Wählen Sie ein Bild von Ihrer Festplatte aus und laden Sie es hoch.

  4. Drücken Sie Ctrl+ Enteroder Shift+ Enter.

Dadurch wird das Bild als Teil des Notizbuchs erstellt und Sie müssen es nicht in das Verzeichnis oder Github hochladen. Ich denke, dies sieht sauberer aus und ist nicht anfällig für fehlerhafte URL-Probleme.

Gaurav Modi
quelle
Rettete mich!, Danke
Mohammad Heydari
Eine weitere hilfreiche Funktion, die von den Entwicklern von hinzugefügt wurde Jupyter. Ein Nachteil, der in Fällen zu beachten ist, in denen dies wichtig ist: Es würde das Bild in den IPyNB JasonCode aufnehmen, wodurch es viel größer und nicht so Code-überarbeitungsfreundlich wird (z. B. bei der Überprüfung von diffs).
eldad-a
13

So geht's mit Markdown:

![Image of Yaktocat](https://octodex.github.com/images/yaktocat.png)
cristianmtr
quelle
1
Aus bestimmten Gründen funktioniert das Anzeigen von Bildern per Markdown bei mir nicht ... Sind Sie sicher, dass die Syntax cristianmtr korrekt ist?
Reblochon Masque
1
Ja, habe es gerade noch einmal getestet. Sind Sie sicher, dass Sie die Zelle auf Markdown setzen? Welche Version von IPython / Jupyter verwenden Sie? Meins sagt: "Die Version des Notebook-Servers ist 4.0.4 und läuft auf: Python 2.7.8 (Standard, 30. Juni 2014, 16:08:48) [MSC v.1500 64 Bit (AMD64)]" Hier ist ein Screenshot mit den Ergebnissen: i.imgur.com/4ISJFDE.png
cristianmtr
Vorsicht mit den Pfaden, was lokal funktioniert, funktioniert nicht online, .e. imgs \ pic.png funktioniert lokal, während es online ist 1: case sensitve (Pic.png) 2: Backslach und Slash sind nicht dasselbe ...: / -
Intelligent-Infrastructure
Funktioniert hervorragend in Python 3.8. Danke
Jamescampbell
Im Dateinamen sind keine Leerzeichen für das Markdown zulässig, falls jemand anderes auf dieses Problem
gestoßen ist
12
  1. Stellen Sie den Zellenmodus auf Markdown
  2. Ziehen Sie Ihr Bild per Drag & Drop in die Zelle. Der folgende Befehl wird erstellt:

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

  1. Führen Sie die Zelle aus / führen Sie sie aus, und das Bild wird angezeigt.

Das Bild ist tatsächlich in das ipynb-Notizbuch eingebettet, und Sie müssen nicht mit separaten Dateien herumspielen. Dies funktioniert leider noch nicht mit Jupyter-Lab (v 1.1.4).

Bearbeiten: Funktioniert in JupyterLab Version 1.2.6

Peter
quelle
1
Ja, wenn ich als HTML-Embebed herunterladen möchte, erhalte ich die Fehlermeldung "nbconvert fehlgeschlagen: fehlender Anhang: imagen.png". Warum?
Efueyo
Das Einfügen eines Bildes aus der Zwischenablage funktioniert auch bei mir (nachdem der Markdown
Zellenmodus
10

Wenn Sie die Jupyter Notebook-API (und nicht mehr die IPython-API) verwenden möchten , finde ich das Unterprojekt der ipywidgets Jupyter. Sie haben ein ImageWidget. Docstring gibt an, dass Sie einen valueParameter haben, der ein Byte ist. So können Sie tun:

import requests
from ipywidgets import Image

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

Ich stimme zu, es ist einfacher, den Markdown-Stil zu verwenden. Es zeigt Ihnen jedoch die Notebook-API für die Bildanzeige. Sie können die Bildgröße auch mit den Parametern widthund ändern height.

dag
quelle
Es scheint Option auf valueumbenannt wurde datain der Zwischenzeit. Für ein lokal gespeichertes Bild hat der Code Image(data=open(filename_png, 'rb').read())für mich funktioniert.
Jottbe
7

Hier ist eine Lösung für Jupyter und Python3 :

Ich habe meine Bilder in einem Ordner namens abgelegt ImageTest. Mein Verzeichnis ist:

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

Um das Bild zu zeigen, habe ich diesen Ausdruck verwendet:

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

Achten Sie auch auf /und\

BlindSide
quelle
Das klappt nur für mich. Vielen Dank! "ShowMyImage" wirkt wie ein Zauber!
Pranzell
4

Dies funktioniert bei mir in einer Markdown-Zelle. Irgendwie muss ich nicht speziell erwähnen, ob es sich um ein Bild oder eine einfache Datei handelt.

![](files/picture.png)
Pranav Pandit
quelle
Wie unterscheidet es sich von der Antwort von Sebastian Stigler?
iNet
1
Ich wollte nur hervorheben, dass es bei mir funktioniert hat, ohne den Titel in die eckige Klammer aufzunehmen. Nichts anderes.
Pranav Pandit
2

Eine Sache, die ich gefunden habe, ist, dass der Pfad Ihres Bildes relativ zu dem Ort sein muss, von dem das Notebook ursprünglich geladen wurde. Wenn Sie in ein anderes Verzeichnis wie Bilder wechseln, ist Ihr Markdown-Pfad immer noch relativ zum ursprünglichen Ladeverzeichnis.

Cybervigilante
quelle
0

Einverstanden, ich hatte die gleichen Probleme und dies ist, was funktioniert hat und was nicht:

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"/>*
PrimeTime
quelle
0

Während viele der obigen Antworten Möglichkeiten zum Einbetten eines Bildes mithilfe einer Datei oder mit Python-Code bieten, gibt es eine Möglichkeit, ein Bild nur mit Markdown und Base64 in das Jupyter-Notizbuch selbst einzubetten!

Um ein Bild im Browser anzuzeigen, können Sie den Link data:image/png;base64,**image data here**für ein Base64-codiertes PNG-Bild oder data:image/jpg;base64,**image data here**ein Base64-codiertes JPG-Bild aufrufen. Ein Beispiellink befindet sich am Ende dieser Antwort.

Um dies in eine Markdown-Seite einzubetten, verwenden Sie einfach ein ähnliches Konstrukt wie die Antwort der Datei, jedoch mit einem base64-Link : ![**description**](data:image/**type**;base64,**base64 data**). Jetzt ist Ihr Bild zu 100% in Ihre Jupyter Notebook-Datei eingebettet!

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

Beispiel Abschlag: ![smile](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABHNCSVQICAgIfAhkiAAAAD9JREFUGJW1jzEOADAIAqHx/1+mE4ltNXEpI3eJQknCIGsiHSLJB+aO/06PxOo/x2wBgKR2jCeEy0rOO6MDdzYQJRcVkl1NggAAAABJRU5ErkJggg==)

id01
quelle