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


304

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

Jawaban:


306

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

8
Bagi saya, ini tidak berfungsi saat mengunduh notebook sebagai html. Ini menunjukkan tautan gambar yang rusak. Menggunakan IPython.display.Imagekarya seperti yang diharapkan.
joelostblom

7
@ cheflo Sintaks di atas tidak menyematkan gambar dalam file html. Jika Anda melihat kode sumber dari file html, Anda akan menemukan entri seperti <img src = "img / picture.png" alt = "title">. Untuk melihat gambar Anda harus menyalinnya di folder imgrelativ ke file html.
Sebastian Stigler

1
Saya curiga itulah masalahnya, terima kasih telah menjelaskan. Saya pikir perbedaan antara kedua pendekatan ini tidak terduga dan, setidaknya bagi saya, menentukan mana yang harus dipilih, jadi saya ingin menarik perhatian padanya.
joelostblom

3
saat melakukannya melalui penurunan harga, pastikan file gambar berada di direktori yang sama di mana notebook Anda berada, untuk beberapa alasan aneh (dalam kasus saya), jupyter-notebook tidak yakin untuk bertindak pada jalur penuh ... ![title](picture.png)
Arun Kumar Khattri

2
@ArunKumarKhattri - memiliki masalah yang sama, hanya jalan reletive ke notebook yang berfungsi - dalam kasus saya
:!

210

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


Memang benar, kemungkinan untuk mengubah ukuran gambar menarik. Tetapi untuk rendering di masa depan, penurunan harga lebih baik bagi saya.
Ger

3
dapatkah Anda menempatkan yang lokal dengan jalur absolut, melalui penurunan harga? Saya mencoba tetapi tampaknya tidak berhasil. Sunting: Firefox (dan Chrome) tidak mengizinkan akses ke file lokal untuk keamanan
Ciprian Tomoiagă

2
@SwimBikeRun Anda harus memilih jenis sel yang tepat. jenis sel Anda saat ini harus berupa kode
youkaichao

1
Jawaban yang diremehkan. Sangat teliti
Nathan

1
versi penurunan harga tidak memungkinkan spasi dalam nama file, bagi siapa pun yang mengalami masalah itu
CoffeeTableEspresso

58

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

3
Bagus! Saya lebih suka jawaban ini karena kami memiliki kontrol pada ukuran output! Itu penting misalnya ketika menggunakan alat pelican untuk menerbitkan notebook jupyter sebagai halaman html statis.
Svend

7
HTML tidak perlu koma - cukup beri spasi di antara atribut Anda - dan disarankan untuk memberi tanda kutip di sekitar semua nilai atribut, misalnya width="60".
colllin

Suci sh * t. Ini sangat luar biasa
Tessaracter

Ya itu luar biasa :) tapi ... gambar hilang dalam versi PDF. Sangat buruk.
babou

21

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

19

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

19

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

19

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.


Selamatkan saya !, Terima kasih
Mohammad Heydari

Namun fungsi bermanfaat lainnya ditambahkan oleh devs of Jupyter. Satu kekurangan yang perlu diperhatikan, untuk kasus-kasus ketika ini penting: itu akan menyertakan gambar dalam IPyNB Jasonkode, sehingga membuatnya jauh lebih besar dan tidak ramah kode revisi (misalnya saat memeriksa diffs).
eldad-a

13

Inilah cara Anda dapat melakukannya dengan Penurunan Harga:

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

1
Untuk beberapa alasan, menampilkan gambar melalui penurunan harga tidak berfungsi untuk saya ... Apakah Anda yakin sintaksnya benar cristianmtr?
Reblochon Masque

1
Yup, baru diuji lagi. Apakah Anda yakin Anda mengatur sel ke Penurunan harga? Juga, versi IPython / Jupyter apa yang Anda gunakan? Mine mengatakan: "Versi server notebook adalah 4.0.4 dan sedang berjalan pada: Python 2.7.8 (default, 30 Juni 2014, 16:08:48) [MSC v.1500 64 bit (AMD64)]" Ini adalah tangkapan layar dengan hasil: i.imgur.com/4ISJFDE.png
cristianmtr

waspadalah dengan jalur, apa yang berfungsi secara lokal tidak berfungsi secara online, .e. imgs \ pic.png bekerja secara lokal, saat online itu 1: case sensitve (Pic.png) 2: backslach dan slash tidak sama ...: / -
Intelligent-Infrastructure

Berfungsi bagus di Python 3.8. Terima kasih
jamescampbell

Tidak ada spasi yang diizinkan dalam nama file untuk penurunan harga, jika ada orang lain yang mengalami masalah ini
CoffeeTableEspresso

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

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


1
Ya kelelawar ketika saya ingin mengunduh sebagai HTML embebed, saya mendapatkan kesalahan "nbconvert gagal: lampiran hilang: imagen.png". Mengapa?
efueyo

Menempelkan gambar dari clipboard juga berfungsi untuk saya (setelah mengatur mode sel ke Markdown)
CgodLEY

10

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.


Tampaknya opsi valuediubah namanya untuk datasementara. Untuk gambar yang disimpan secara lokal, kode tersebut Image(data=open(filename_png, 'rb').read())berfungsi untuk saya.
jottbe

7

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 hanya berhasil untuk saya. Terima kasih! "ShowMyImage" bekerja seperti pesona!
Pranzell

4

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)

Apa bedanya dengan jawaban Sebastian Stigler?
iNet

1
Hanya ingin menggarisbawahi bahwa itu bekerja untuk saya tanpa menyertakan judul dalam braket kuadrat. Tidak ada yang berbeda.
Pranav Pandit

2

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.


0

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

0

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

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.