Memasukkan gambar ke dalam penurunan harga notebook IPython

217

Saya mulai sangat bergantung pada aplikasi notebook IPython untuk mengembangkan dan mendokumentasikan algoritma. Itu luar biasa; tetapi ada sesuatu yang tampaknya harus dilakukan, tetapi saya tidak tahu bagaimana melakukannya:

Saya ingin memasukkan gambar lokal ke dalam markdown notebook IPython (lokal) saya untuk membantu dalam mendokumentasikan suatu algoritma. Saya cukup tahu untuk menambahkan sesuatu seperti <img src="image.png">penurunan harga, tapi itu sejauh pengetahuan saya. Saya berasumsi saya bisa meletakkan gambar di direktori yang diwakili oleh 127.0.0.1:8888 (atau beberapa subdirektori) untuk dapat mengaksesnya, tapi saya tidak tahu di mana direktori itu berada. (Saya sedang mengerjakan mac.) Jadi, apakah mungkin untuk melakukan apa yang saya coba lakukan tanpa terlalu banyak kesulitan?

python jupyter-notebook ipython jupyter benpro
sumber

Jawaban:

201

File di dalam buku catatan notebook tersedia di bawah url "file /". Jadi jika itu di jalur dasar, itu akan menjadi <img src="files/image.png">, dan subdirs dll juga tersedia:, dll <img src="files/subdir/image.png">.

Pembaruan : dimulai dengan IPython 2.0, files/awalan tidak lagi diperlukan (lih. Catatan rilis ). Jadi sekarang solusinya <img src="image.png">hanya berfungsi seperti yang diharapkan.

minrk
sumber
3
Ah, Anda mungkin menggunakan 0,12, bukan? Saat ini melayani file lokal hanya tersedia di master. Dan ya, "direktori notebook" adalah direktori dengan notebook (file .ipynb).
minrk
107
Karena Anda dalam penurunan harga, mengapa tidak digunakan ![caption](files/image.png)?
kynan
4
@ minrk: tidak berhasil untuk saya. Saya meletakkan "<img src =" k.png ">", tetapi tidak menunjukkan apa-apa. k.png berada di folder yang sama dengan file notebook.
Abid Rahman K
4
Harap baca kembali jawaban dan komentarnya. Url Anda akan selalu dimulai dengan 'file /', jadi jika Anda memiliki di k.pngsebelah buku catatan Anda, URL akan menjadi src="files/k.png".
minrk
2
Anda harus me-refresh halaman web untuk gambar di url yang diberikan untuk dimuat ulang.
minrk
230

Sebagian besar jawaban yang diberikan sejauh ini menuju ke arah yang salah, menyarankan untuk memuat pustaka tambahan dan menggunakan kode alih-alih markup. Dalam Ipython / Jupyter Notebooks sangat sederhana. Pastikan sel memang dalam markup dan untuk menampilkan penggunaan gambar:

![alt text](imagename.png "Title")

Keuntungan lebih lanjut dibandingkan dengan metode lain yang diusulkan adalah bahwa Anda dapat menampilkan semua format file umum termasuk jpg, png, dan gif (animasi).

Philipp Schwarz
sumber
Ingin tahu bagaimana Anda mengetahui perintah ini. Apakah ini unik untuk Jupyter atau apakah ini bahasa tertentu (mungkin format lateks) yang Anda gunakan di dalam Jupyter untuk menambahkan gambar?
Alex G
1
@ Alex G, Markdown adalah bahasa asing dengan sintaks pemformatan teks biasa yang dirancang sehingga dapat dikonversi ke HTML dan banyak format lainnya. Penurunan harga sering digunakan untuk membuat teks kaya menggunakan editor teks biasa. Lihatlah tautan berikut untuk mempelajari sintaks: github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet
Philipp Schwarz
@ PhilippSchwarz apakah ada beberapa opsi untuk contoh Anda di atas untuk mengontrol ukuran gambar 'tempel'? Menggunakan <img...>tag, opsi seperti ini muncul kira-kira seperti ini<img ... width="480"> .
Reb.Cabin
1
Menggunakan ini tidak berhasil. Notebook mencari di lokasi tertentu / notebook / <jalur kerja saya ditambahkan di sini> - tentunya ini bukan root - dan jalur lokal tidak ada. Saya merasa terbantu jika hanya menggunakan gambar sisipkan notebook - yang menambahkan gambar sebagai lampiran (yang sekarang portabel).
Mark
2
Apakah ada cara untuk menggunakan metode ini dengan file gambar yang memiliki ruang dalam namanya?
zebralamy
78

Saya menggunakan ipython 2.0, jadi hanya dua baris.

from IPython.display import Image
Image(filename='output1.png')
Gomes
sumber
25
Ini adalah cara yang benar untuk menampilkan gambar dalam sel kode . jawaban minrk adalah cara yang benar untuk menampilkan gambar dalam sel penurunan harga .
Mike
3
Menggunakan jupyter notebook 4.2.0, tidak muncul gambar kecuali saya panggil displayjuga: from IPython.display import Image, display; display(Image(filename='output1.png'))
Matteo T.
22

[Usang]

IPython / Jupyter sekarang memiliki dukungan untuk modul ekstensi yang dapat menyisipkan gambar melalui salin dan tempel atau seret & lepas.

https://github.com/ipython-contrib/IPython-notebook-extensions

Ekstensi drag & drop tampaknya berfungsi di sebagian besar browser

https://github.com/ipython-contrib/IPython-notebook-extensions/tree/master/nbextensions/usability/dragdrop

Tetapi salin dan tempel hanya berfungsi di Chrome.

Mike
sumber
1
Jawaban ini perlu beberapa perbaikan. Sangat sedikit yang tahu tentang ekstensi Ipython.
Thoran
baru saja mencoba drag'n'drop di Safari dan Chrome, tidak berfungsi untuk saya (OSX, Py3, semua pembaruan)
K.-Michael Aye
2
Tautan kedua yang Anda posting rusak - ekstensi tidak lagi didukung?
zthomas.nc
Saya juga tidak dapat menemukan ekstensi lagi.
yerforkferchips
Ya, Jupyter telah bergerak sedikit dalam tiga tahun terakhir dan jawaban ini sangat usang.
Mike
18

Memasukkan gambar ke Jupyter NB adalah operasi yang jauh lebih sederhana daripada yang disinggung kebanyakan orang di sini.

1) Cukup buat sel Markdown kosong. 2) Kemudian seret-dan-jatuhkan file gambar ke dalam sel Markdown yang kosong.

Kode Penurunan harga yang akan menyisipkan gambar kemudian muncul.

Misalnya, string yang ditampilkan disorot dengan warna abu-abu di bawah ini akan muncul di sel Jupyter:

![Venus_flytrap_taxonomy.jpg](attachment:Venus_flytrap_taxonomy.jpg)

3) Kemudian jalankan sel Markdown dengan menekan Shift-Enter. Server Jupyter kemudian akan menyisipkan gambar, dan gambar kemudian akan muncul.

Saya menjalankan server notebook Jupyter adalah: 5.7.4 dengan Python 3.7.0 pada Windows 7.

Ini sangat sederhana !!

Rich Lysakowski PhD
sumber
2
Ini benar-benar solusi terbaik yang saya temukan !!
GCGM
Sayangnya metode ini tidak berfungsi ketika Jupyter Notebook versi 6.0 di-host di Google Cloud. Adakah yang memiliki solusi yang berfungsi tanpa hak istimewa Admin, selain menginstal nbextension drag-and-drop?
Rich Lysakowski PhD
13

Saya meletakkan notebook IPython di folder yang sama dengan gambar. Saya menggunakan Windows. Nama gambar adalah "phuong huong xac dinh.PNG".

Dalam Penurunan Harga:

<img src="phuong huong xac dinh.PNG">

Kode:

from IPython.display import Image
Image(filename='phuong huong xac dinh.PNG')
hidroman
sumber
1
referensi dokumentasi ipython.readthedocs.io/en/stable/api/generated/... , meskipun menggunakan penurunan harga ( ![alt text](foo.png "the title")lebih disukai, kecuali diperlukan args tambahan dari api.
michael
9

Pertama, pastikan Anda berada dalam model edit penurunan harga di sel notebook ipython

Ini adalah cara alternatif untuk metode yang diusulkan oleh orang lain <img src="myimage.png">:

![title](img/picture.png)

Tampaknya juga berfungsi jika judulnya hilang:

![](img/picture.png)

Perhatikan tidak ada kutipan di jalur. Tidak yakin apakah ini berfungsi untuk jalur dengan spasi putih!

tsando
sumber
1
Bagi saya, gambar dengan spasi putih di namanya tidak ditampilkan di notebook. Saya menghapus spasi, saya bisa melihat sekarang.
insanely_sin
9

Versi terakhir notebook jupyter menerima salinan / tempel gambar secara asli

Romain Jouin
sumber
Saya lebih suka opsi ini, karena menanamkan gambar dalam biner notebook. Itu membuat notebook lebih berat, tetapi Anda tidak perlu menyimpan gambar di jalur relatif.
Tulio Casagrande
8

Jika Anda ingin menampilkan gambar dalam sel Penurunan harga maka gunakan:

<img src="files/image.png" width="800" height="400">

Jika Anda ingin menampilkan gambar dalam sel Kode maka gunakan:

from IPython.display import Image
Image(filename='output1.png',width=800, height=400)
seralouk
sumber
Di sel penurunan harga, bagi saya, bekerja tanpa koma:<img src="files/image.png" width=800 height=400>
aerijman
memang benar bahwa koma tidak diperlukan dalam perintah HTML. lihat pembaruan saya
seralouk
5

Ubah blok default dari "Kode" ke "Penurunan Harga" sebelum menjalankan kode ini:

![<caption>](image_filename.png)

Jika file gambar ada di folder lain, Anda dapat melakukan hal berikut:

![<caption>](folder/image_filename.png)
Jade Cacho
sumber
4

Bagi mereka yang mencari di mana menempatkan file gambar pada mesin Jupyter sehingga dapat ditunjukkan dari sistem file lokal.

Saya memasukkan mypic.pngke dalam

/root/Images/mypic.png

(yaitu folder Gambar yang muncul di browser file online Jupyter)

Dalam hal ini saya perlu meletakkan baris berikut ke dalam sel Markdown untuk membuat foto saya muncul di notepad:

![My Title](Images/mypic.png)
Sergey Shcherbakov
sumber
2

Jawaban minrk benar.

Namun, saya menemukan bahwa gambar tampak rusak di Print View (pada mesin Windows saya menjalankan distribusi Anaconda IPython versi 0.13.2 di browser Chrome)

Solusi untuk ini adalah menggunakan <img src="../files/image.png"> sebagai gantinya.

Ini membuat gambar muncul dengan benar di Print View dan tampilan pengeditan normal iPython.

UPDATE: pada saat saya upgrade ke iPython v1.1.0 tidak perlu lagi untuk solusi ini karena tampilan cetak sudah tidak ada lagi. Bahkan, Anda harus menghindari solusi ini karena mencegah alat nbconvert menemukan file.

jlarchibald
sumber
-3

Anda dapat menemukan direktori kerja Anda saat ini dengan perintah 'pwd' di jupyter notebook tanpa tanda kutip.

Noman Nazir
sumber