การแทรกรูปภาพลงในมาร์คอัปโน๊ตบุ๊ค IPython

217

ฉันเริ่มต้องพึ่งพาแอพโน๊ตบุ๊ก IPython เพื่อพัฒนาและอัลกอริทึมเอกสาร มันเจ๋งนะ; แต่มีบางสิ่งที่ดูเหมือนว่าควรจะเป็นไปได้ แต่ฉันไม่สามารถหาวิธีที่จะทำ:

ฉันต้องการแทรกอิมเมจโลคัลลงในการทำเครื่องหมายโน๊ตบุ๊ก IPython (ในพื้นที่) เพื่อช่วยในการจัดทำอัลกอริทึม ฉันรู้พอที่จะเพิ่มสิ่งที่ชอบ<img src="image.png">ลงใน markdown แต่นั่นก็เกี่ยวกับความรู้ของฉัน ฉันคิดว่าฉันสามารถใส่ภาพในไดเรกทอรีที่แสดงโดย 127.0.0.1:8888 (หรือไดเรกทอรีย่อยบางส่วน) เพื่อให้สามารถเข้าถึงได้ แต่ฉันไม่สามารถคิดได้ว่าไดเรกทอรีนั้นอยู่ที่ไหน (ฉันกำลังทำงานกับ mac) ดังนั้นเป็นไปได้ไหมที่จะทำสิ่งที่ฉันพยายามทำโดยไม่มีปัญหามากเกินไป?

— benpro
แหล่งที่มา

201

ไฟล์ในสมุดบันทึกของ dir นั้นมีอยู่ใน "files /" url ดังนั้นถ้ามันอยู่ในเส้นทางพื้นฐานก็จะเป็น<img src="files/image.png">และย่อย ฯลฯ นอกจากนี้ยังมี: <img src="files/subdir/image.png">ฯลฯ

อัปเดต : เริ่มต้นด้วย IPython 2.0 files/ไม่จำเป็นต้องใช้ส่วนนำหน้าอีกต่อไป ( บันทึกประจำรุ่น ) ดังนั้นวิธีการแก้ปัญหา<img src="image.png">ก็ทำงานได้อย่างที่คาดไว้

— minrk
แหล่งที่มา

3

อ่าคุณอาจใช้ 0.12 ใช่ไหม ขณะนี้การให้บริการไฟล์ในเครื่องนั้นมีให้บริการในแบบมาสเตอร์เท่านั้น และใช่ "สมุดบันทึกสมุดบันทึก" เป็นไดเรกทอรีที่มีสมุดบันทึก (ไฟล์. ipynb)

— minrk

107

ตั้งแต่คุณอยู่ใน markdown ทำไมไม่ใช้![caption](files/image.png)?

— kynan

4

@minrk: มันไม่ได้ผลสำหรับฉัน ฉันใส่ "<img src =" k.png ">" แต่มันไม่แสดงอะไรเลย k.png อยู่ในโฟลเดอร์เดียวกับไฟล์โน้ตบุ๊ก

— Abid Rahman K

4

โปรดอ่านคำตอบและความคิดเห็นอีกครั้ง URL ของคุณจะเสมอเริ่มต้นด้วย '/ ไฟล์' ดังนั้นถ้าคุณมีk.pngติดกับโน้ตบุ๊คของคุณ URL src="files/k.png"จะเป็น

— minrk

2

คุณต้องรีเฟรชหน้าเว็บเพื่อให้ได้ภาพใน URL ที่กำหนดเพื่อทำการโหลดใหม่

— minrk

230

คำตอบส่วนใหญ่ที่ให้ไปในทิศทางที่ไม่ถูกต้องแนะนำให้โหลดไลบรารีเพิ่มเติมและใช้รหัสแทนมาร์กอัป ใน Ipython / Jupyter Notebook นั้นง่ายมาก ตรวจสอบให้แน่ใจว่าเซลล์นั้นอยู่ในมาร์กอัปและเพื่อแสดงภาพที่ใช้:

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

ข้อดีเพิ่มเติมเมื่อเปรียบเทียบกับวิธีอื่นที่เสนอคือคุณสามารถแสดงรูปแบบไฟล์ทั่วไปทั้งหมดรวมถึง jpg, png และ gif (ภาพเคลื่อนไหว)

— Philipp Schwarz
แหล่งที่มา

อยากรู้ว่าคุณรู้จักคำสั่งนี้อย่างไร มันเป็นเอกลักษณ์ของ Jupyter หรืออาจเป็นบางภาษา (การจัดรูปแบบลาเท็กซ์) ที่คุณใช้ภายใน Jupyter เพื่อเพิ่มภาพ?

— Alex G

1

@ Alex G, Markdown เป็นภาษาที่มีไวยากรณ์การจัดรูปแบบข้อความล้วนที่ออกแบบมาเพื่อให้สามารถแปลงเป็น HTML และรูปแบบอื่น ๆ ได้ Markdown มักใช้ในการสร้าง rich text โดยใช้โปรแกรมแก้ไขข้อความธรรมดา ตรวจสอบลิงก์ต่อไปนี้เพื่อเรียนรู้ไวยากรณ์: github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet

— Philipp Schwarz

@PhilippSchwarz มีตัวเลือกบางอย่างสำหรับตัวอย่างของคุณด้านบนเพื่อควบคุมขนาดของภาพ 'วาง' หรือไม่ การใช้แท็กตัวเลือกดังกล่าวปรากฏประมาณเช่นนี้<img...> <img ... width="480">

— Reb.Cabin

1

ใช้สิ่งนี้มันไม่ทำงาน สมุดบันทึกกำลังมองหาในตำแหน่งเฉพาะ / สมุดบันทึก / <เส้นทางการทำงานของฉันต่อท้ายที่นี่> - แน่นอนว่านี่ไม่ใช่รูต - และไม่มีเส้นทางภายในเครื่อง ฉันพบว่ามีประโยชน์เพียงแค่ใช้ภาพแทรกสมุดบันทึก- ซึ่งเพิ่มรูปภาพเป็นสิ่งที่แนบมา (ซึ่งตอนนี้พกพาได้)

— ทำเครื่องหมาย

2

มีวิธีการใช้วิธีนี้กับไฟล์ภาพที่มีพื้นที่ว่างในชื่อของพวกเขา?

— zebralamy

78

ฉันใช้ ipython 2.0 ดังนั้นแค่สองบรรทัด

from IPython.display import Image
Image(filename='output1.png')

— โกเมส
แหล่งที่มา

25

นี่เป็นวิธีที่ถูกต้องในการแสดงภาพในเซลล์รหัส คำตอบของ minrk เป็นวิธีที่ถูกต้องในการแสดงภาพในเซลล์markdown

— Mike

3

การใช้โน๊ตบุ๊ค jupyter 4.2.0 จะไม่แสดงภาพเว้นแต่ว่าฉันจะเรียกdisplayเช่นกัน: from IPython.display import Image, display; display(Image(filename='output1.png'))

— Matteo T.

22

[ล้าสมัย]

ตอนนี้ IPython / Jupyter มีการสนับสนุนโมดูลส่วนขยายที่สามารถแทรกรูปภาพผ่านการคัดลอกและวางหรือลากและวาง

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

ดูเหมือนว่าส่วนขยายการลากและวางจะทำงานในเบราว์เซอร์ส่วนใหญ่

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

แต่การคัดลอกและวางใช้งานได้เฉพาะใน Chrome

— ไมค์
แหล่งที่มา

1

คำตอบนี้ต้องการ upvotes บางส่วน มีน้อยมากที่รู้เกี่ยวกับส่วนขยายของ Ipython

— Thoran

เพิ่งลอง drag'n'drop ใน Safari และ Chrome ไม่ทำงานสำหรับฉัน (OSX, Py3, อัปเดตทั้งหมด)

— K.

2

ลิงก์ที่สองที่คุณโพสต์เสีย - ไม่รองรับส่วนขยายอีกต่อไป?

— zthomas.nc

ฉันไม่พบส่วนขยายอีกต่อไป

— yerforkferchips

ใช่ Jupyter ย้ายไปเล็กน้อยในช่วงสามปีที่ผ่านมาและคำตอบนี้ค่อนข้างล้าสมัย

— Mike

18

การสร้างภาพเข้าสู่ Jupyter NB เป็นการดำเนินการที่ง่ายกว่าคนส่วนใหญ่ที่พาดพิงถึงที่นี่

1) เพียงสร้างเซลล์ Markdown ที่ว่างเปล่า 2) จากนั้นลากและวางไฟล์รูปภาพลงในเซลล์ Markdown ที่ว่างเปล่า

รหัส Markdown ที่จะแทรกภาพนั้นจะปรากฏขึ้น

ตัวอย่างเช่นสตริงที่เน้นสีเทาด้านล่างจะปรากฏในเซลล์ Jupyter:

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

3) จากนั้นเรียกใช้เซลล์ Markdown โดยกด Shift-Enter จากนั้นเซิร์ฟเวอร์ Jupyter จะแทรกภาพจากนั้นภาพจะปรากฏขึ้น

ฉันใช้เซิร์ฟเวอร์โน้ตบุ๊ค Jupyter คือ: 5.7.4 กับ Python 3.7.0 บน Windows 7

มันง่ายมาก !!

— Lysakowski รวยปริญญาเอก
แหล่งที่มา

2

นี่เป็นทางออกที่ดีที่สุดที่ฉันได้พบ !!

— GCGM

น่าเสียดายที่วิธีการนี้ใช้ไม่ได้เมื่อ Jupyter Notebook เวอร์ชัน 6.0 โฮสต์ใน Google Cloud ทุกคนมีวิธีแก้ปัญหาที่ทำงานโดยไม่มีสิทธิ์ของผู้ดูแลระบบนอกจากการติดตั้ง nbextension แบบลากแล้วปล่อย

— Rich Lysakowski ระดับปริญญาเอก

13

ฉันวางโน้ตบุ๊ก IPython ในโฟลเดอร์เดียวกันพร้อมรูปภาพ ฉันใช้ Windows ชื่อภาพคือ "phuong huong xac dinh.PNG"

ใน Markdown:

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

รหัส:

from IPython.display import Image
Image(filename='phuong huong xac dinh.PNG')

— Hydroman
แหล่งที่มา

1

การอ้างอิงเอกสารipython.readthedocs.io/en/stable/api/generated/ ...... ถึงแม้ว่าจะใช้ markdown ( ![alt text](foo.png "the title")เป็นสิ่งที่ดีกว่ายกเว้นกรณีที่จำเป็นต้องใช้ args เพิ่มเติมจาก api

— michael

9

ก่อนอื่นตรวจสอบให้แน่ใจว่าคุณอยู่ในโมเดลแก้ไข markdown ในเซลล์โน๊ตบุ๊ก ipython

นี่เป็นวิธีทางเลือกสำหรับวิธีการที่ผู้อื่นเสนอ<img src="myimage.png">:

![title](img/picture.png)

ดูเหมือนว่าจะใช้งานได้หากชื่อหายไป:

![](img/picture.png)

หมายเหตุไม่ควรมีการอ้างอิงในเส้นทาง ไม่แน่ใจว่าสิ่งนี้ใช้ได้กับเส้นทางที่มีช่องว่างสีขาวหรือไม่!

— tsando
แหล่งที่มา

1

สำหรับฉันรูปภาพที่มีช่องว่างสีขาวในชื่อไม่ได้ถูกแสดงผลในสมุดบันทึก ฉันลบช่องว่างฉันสามารถดูได้ในขณะนี้

— insanely_sin

9

สมุดบันทึก jupyter รุ่นล่าสุดยอมรับการคัดลอก / วางภาพโดยกำเนิด

— โรเมนจูอิน
แหล่งที่มา

ฉันชอบตัวเลือกนี้เนื่องจากมันฝังรูปภาพไว้ในไบนารีสมุดบันทึก มันทำให้โน้ตบุ๊กหนักขึ้น แต่คุณไม่จำเป็นต้องเก็บภาพไว้ในเส้นทางที่สัมพันธ์กัน

— Tulio Casagrande

8

หากคุณต้องการแสดงภาพในเซลล์ Markdown ให้ใช้:

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

หากคุณต้องการแสดงภาพในเซลล์รหัสให้ใช้:

from IPython.display import Image
Image(filename='output1.png',width=800, height=400)

— seralouk
แหล่งที่มา

ในเซลล์ markdown สำหรับฉันทำงานได้โดยไม่ต้องใช้เครื่องหมายจุลภาค:<img src="files/image.png" width=800 height=400>

— aerijman

เป็นจริงที่ไม่จำเป็นต้องใช้จุลภาคในคำสั่ง HTML ดูการปรับปรุงของฉัน

— seralouk

5

เปลี่ยนบล็อกเริ่มต้นจาก "รหัส" เป็น "Markdown" ก่อนเรียกใช้รหัสนี้:

![<caption>](image_filename.png)

หากไฟล์ภาพอยู่ในโฟลเดอร์อื่นคุณสามารถทำสิ่งต่อไปนี้:

![<caption>](folder/image_filename.png)

— Jade Cacho
แหล่งที่มา

4

สำหรับผู้ที่ต้องการวางไฟล์อิมเมจบนเครื่อง Jupyter เพื่อให้สามารถแสดงได้จากระบบไฟล์โลคอล

ฉันใส่ของฉันmypic.pngเข้าไป

/root/Images/mypic.png

(นั่นคือโฟลเดอร์รูปภาพที่แสดงในเบราว์เซอร์ไฟล์ Jupyter ออนไลน์)

ในกรณีนั้นฉันต้องใส่บรรทัดต่อไปนี้ลงในเซลล์ Markdown เพื่อให้รูปของฉันแสดงใน notepad:

![My Title](Images/mypic.png)

— Sergey Shcherbakov
แหล่งที่มา

2

คำตอบของ minrk ถูกต้อง

อย่างไรก็ตามฉันพบว่ารูปภาพต่าง ๆ ปรากฏขึ้นใน Print View (บนเครื่อง Windows ของฉันที่รันการกระจาย Anaconda ของ IPython เวอร์ชั่น 0.13.2 ในเบราว์เซอร์ Chrome)

วิธีแก้ปัญหาสำหรับสิ่งนี้คือใช้<img src="../files/image.png">แทน

สิ่งนี้ทำให้รูปภาพปรากฏอย่างถูกต้องทั้งในมุมมองพิมพ์และมุมมองการแก้ไข iPython ปกติ

UPDATE: ตั้งแต่อัพเกรดเป็น iPython v1.1.0 ฉันไม่จำเป็นต้องแก้ไขปัญหานี้อีกต่อไปเนื่องจากไม่มีมุมมองการพิมพ์อีกต่อไป ในความเป็นจริงคุณต้องหลีกเลี่ยงวิธีแก้ปัญหานี้เนื่องจากจะป้องกันไม่ให้เครื่องมือ nbconvert ค้นหาไฟล์

— jlarchibald
แหล่งที่มา

-3

คุณสามารถค้นหาไดเรกทอรีการทำงานปัจจุบันของคุณโดยคำสั่ง 'pwd' ในสมุดบันทึก jupyter โดยไม่ต้องใส่เครื่องหมายอัญประกาศ

— นาซีนาซีร์
แหล่งที่มา