Bagaimana cara menyematkan gambar atau gambar di notebook jupyter, baik dari mesin lokal atau dari sumber daya web?

Saya ingin memasukkan gambar dalam notebook jupyter.

Jika saya melakukan yang berikut ini, itu berfungsi:

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

Tapi saya ingin memasukkan gambar dalam sel penurunan harga dan kode berikut memberikan kesalahan 404:

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

Saya juga mencoba

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

Tapi saya masih mendapatkan kesalahan yang sama:

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

Anda tidak boleh menggunakan tanda kutip di sekitar nama file gambar dalam penurunan harga!

Jika Anda membaca pesan kesalahan dengan hati-hati, Anda akan melihat dua %22bagian dalam tautan. Itu adalah tanda kutip yang disandikan html.

Anda harus mengubah garis

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

untuk

![title](img/picture.png)

MEMPERBARUI

Diasumsikan, bahwa Anda memiliki struktur file berikut dan Anda menjalankan jupyter notebookperintah di direktori tempat file example.ipynb(<- berisi markdown untuk gambar) disimpan:

/
+-- example.ipynb
+-- img
    +-- picture.png

Ada beberapa cara untuk mengirim gambar di buku catatan Jupyter:

via HTML:

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

Anda mempertahankan kemampuan untuk menggunakan tag HTML untuk mengubah ukuran, dll ...

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

Anda juga dapat menampilkan gambar yang disimpan secara lokal, baik melalui jalur relatif atau absolut.

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

jika gambar itu lebih lebar dari pengaturan tampilan: terima kasih

gunakan unconfined=Trueuntuk menonaktifkan kurungan lebar maksimum gambar

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

atau melalui penurunan harga:

• pastikan sel adalah sel penurunan harga, dan bukan sel kode, terima kasih @ 游 凯 超 di komentar)
• Harap dicatat bahwa pada beberapa sistem, penurunan harga tidak memungkinkan ruang putih dalam nama file. Berkat @CoffeeTableEspresso dan @zebralamy di komentar)
  (Di Macos, selama Anda berada di sel penurunan harga Anda akan melakukan seperti ini:, ![title](../image 1.png)dan tidak khawatir tentang ruang putih).

untuk gambar web:

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

seperti yang ditunjukkan oleh @cristianmtr. Perhatian untuk tidak menggunakan kutipan ini ""atau kutipan di ''sekitar url

atau yang lokal:

![title](img/picture.png)

diperagakan oleh @Sebastian

Atau, Anda dapat menggunakan HTML biasa <img src>, yang memungkinkan Anda untuk mengubah tinggi dan lebar dan masih dibaca oleh penerjemah markdown:

<img src="subdirectory/MyImage.png" width=60 height=60 />

Saya tahu ini tidak sepenuhnya relevan, tetapi karena jawaban ini berada di peringkat pertama beberapa kali ketika Anda mencari ' cara menampilkan gambar di Jupyter ', harap pertimbangkan jawaban ini juga.

Anda bisa menggunakan matplotlib untuk menampilkan gambar sebagai berikut.

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

Saya terkejut tidak ada seorang pun di sini yang menyebutkan opsi sihir sel html. dari docs (IPython, tetapi sama untuk Jupyter)

%% html

Render the cell as a block of HTML

Selain jawaban lain menggunakan HTML (baik dalam penurunan harga atau menggunakan %%HTMLsihir:

Jika Anda perlu menentukan ketinggian gambar, ini tidak akan berfungsi:

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

Itu karena styling CSS di Jupyter menggunakan height: autoper default untuk imgtag, yang menimpa atribut tinggi HTML. Anda perlu menimpa heightatribut CSS sebagai gantinya:

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

Masukkan gambar langsung di notebook Jupyter.

Catatan: Anda harus memiliki salinan gambar lokal di komputer Anda

Anda dapat memasukkan gambar ke dalam notebook Jupyter itu sendiri. Dengan cara ini Anda tidak perlu menyimpan gambar secara terpisah di folder.

Langkah:

1. Konversi sel menjadi markdowndengan:

   • menekan M pada sel yang dipilih
     ATAU
     
   • Dari bilah menu, Sel> Jenis Sel> Penurunan harga.
     ( Catatan: Penting untuk mengonversi sel menjadi Markdown, jika tidak opsi "Sisipkan Gambar" pada Langkah 2 tidak akan aktif)

2. Sekarang buka bilah menu dan pilih Edit -> Sisipkan Gambar.

3. Pilih gambar dari disk Anda dan unggah.

4. Tekan Ctrl+ Enteratau Shift+ Enter.

Ini akan menjadikan gambar sebagai bagian dari buku catatan dan Anda tidak perlu mengunggah di direktori atau Github. Saya merasa ini terlihat lebih bersih dan tidak rentan terhadap masalah URL yang rusak.

Inilah cara Anda dapat melakukannya dengan Penurunan Harga:

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

1. Atur mode sel ke Penurunan harga
2. Seret dan letakkan gambar Anda ke dalam sel. Perintah berikut akan dibuat:

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

3. Jalankan / Jalankan sel dan gambar muncul.

Gambar sebenarnya tertanam di Notebook ipynb dan Anda tidak perlu dipusingkan dengan file terpisah. Sayangnya ini belum bekerja dengan Jupyter-Lab (v 1.1.4).

Sunting: Bekerja di JupyterLab Versi 1.2.6

Jika Anda ingin menggunakan API Notebook Jupyter (dan bukan yang IPython lagi), saya menemukan sub-proyek ipywidgets Jupyter. Anda memiliki Imagewidget. Docstring menentukan bahwa Anda memiliki valueparameter yang merupakan byte. Jadi kamu bisa melakukan:

import requests
from ipywidgets import Image

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

Saya setuju, lebih mudah menggunakan gaya Markdown. Tapi itu menunjukkan kepada Anda gambar tampilan Notebook API. Anda juga dapat mengubah ukuran gambar dengan widthdan heightparameter.

Ini Solusi untuk Jupyter dan Python3 :

Saya menjatuhkan gambar saya di folder bernama ImageTest. Direktori saya adalah:

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

Untuk menampilkan gambar saya menggunakan ungkapan ini:

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

Juga diperhatikan /dan\

Ini bekerja untuk saya di sel penurunan harga. Entah bagaimana saya tidak perlu menyebutkan secara khusus apakah itu gambar atau file sederhana.

![](files/picture.png)

Satu hal yang saya temukan adalah jalur gambar Anda harus relatif ke mana pun notebook itu awalnya diambil. jika Anda melakukan cd ke direktori lain, seperti Pictures Path penurunan harga Anda masih relatif terhadap direktori pemuatan asli.

Setuju, saya punya masalah yang sama dan ini yang berhasil dan yang tidak:

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

Sementara banyak jawaban di atas memberikan cara untuk menyematkan gambar menggunakan file atau dengan kode Python, ada cara untuk menanamkan gambar di notebook jupyter itu sendiri hanya menggunakan markdown dan base64!

Untuk melihat gambar di browser, Anda dapat mengunjungi tautan data:image/png;base64,**image data here**untuk gambar PNG yang disandikan base64, atau data:image/jpg;base64,**image data here**untuk gambar JPG yang disandikan base64. Tautan contoh dapat ditemukan di akhir jawaban ini.

Untuk menanamkan ini ke halaman penurunan harga, hanya menggunakan konstruksi yang sama seperti jawaban file, namun dengan base64 menghubungkan gantinya: ![**description**](data:image/**type**;base64,**base64 data**). Sekarang gambar Anda 100% disematkan ke file Notebook Jupyter Anda!

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

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