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

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

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

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

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

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

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

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

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.

So geht's mit Markdown:

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

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)

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

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.

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\

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)

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.

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

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