วิธีการฝังภาพหรือภาพในสมุดบันทึก jupyter ทั้งจากเครื่องท้องถิ่นหรือจากเว็บทรัพยากร?

ฉันต้องการที่จะรวมภาพในสมุดบันทึก jupyter

หากฉันทำสิ่งต่อไปนี้มันจะได้ผล:

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

แต่ฉันต้องการที่จะรวมภาพในเซลล์ markdown และรหัสต่อไปนี้ให้ข้อผิดพลาด 404:

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

ฉันก็ลอง

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

แต่ฉันยังคงได้รับข้อผิดพลาดเดียวกัน:

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

คุณต้องไม่ใช้เครื่องหมายคำพูดล้อมรอบชื่อของไฟล์รูปภาพใน markdown!

หากคุณอ่านข้อความแสดงข้อผิดพลาดอย่างรอบคอบคุณจะเห็นสอง%22ส่วนในลิงก์ นั่นคือเครื่องหมายคำพูดที่เข้ารหัส html

คุณต้องเปลี่ยนสาย

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

ถึง

![title](img/picture.png)

UPDATE

มีการสันนิษฐานว่าคุณมีโครงสร้างไฟล์ต่อไปนี้และคุณรัน jupyter notebookคำสั่งในไดเรกทอรีที่จัดเก็บไฟล์example.ipynb(<- มี markdown สำหรับภาพ):

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

มีหลายวิธีในการโพสต์ภาพในสมุดบันทึก Jupyter:

ผ่าน HTML:

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

คุณคงความสามารถในการใช้แท็ก HTML เพื่อปรับขนาด ฯลฯ ...

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

นอกจากนี้คุณยังสามารถแสดงภาพที่เก็บไว้ในเครื่องทั้งผ่านทางญาติหรือเส้นทางที่แน่นอน

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

หากภาพมันกว้างกว่าการตั้งค่าการแสดงผล: ขอบคุณ

ใช้unconfined=Trueเพื่อปิดการ จำกัด ขนาดความกว้างสูงสุดของรูปภาพ

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

หรือผ่านทาง markdown:

• ตรวจสอบให้แน่ใจว่าเซลล์เป็นเซลล์ markdown และไม่ใช่เซลล์รหัสขอบคุณ @ 游凯超ในความคิดเห็น)
• โปรดทราบว่าในบางระบบ markdown จะไม่อนุญาตให้มี white space ในชื่อไฟล์ ขอบคุณ @CoffeeTableEspresso และ @zebralamy ในความคิดเห็น)
  (บน macos ตราบใดที่คุณอยู่ในเซลล์ markdown คุณจะทำสิ่งนี้: ![title](../image 1.png)และไม่ต้องกังวลเกี่ยวกับพื้นที่สีขาว)

สำหรับภาพเว็บ:

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

ตามที่แสดงโดย @cristianmtr ให้ความสนใจไม่ใช้คำพูดเหล่านี้""หรือที่''อยู่รอบ ๆ url

หรือท้องถิ่น:

![title](img/picture.png)

แสดงโดย @Sebastian

อีกวิธีหนึ่งคุณสามารถใช้ HTML ธรรมดา<img src>ซึ่งช่วยให้คุณเปลี่ยนความสูงและความกว้างและยังคงถูกอ่านโดยล่ามมาร์กอัป:

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

ฉันรู้ว่าสิ่งนี้ไม่เกี่ยวข้องอย่างสมบูรณ์ แต่เนื่องจากคำตอบนี้ได้รับการจัดอันดับหลายครั้งแรกเมื่อคุณค้นหา ' วิธีแสดงรูปภาพใน Jupyter ' โปรดพิจารณาคำตอบนี้ด้วย

คุณสามารถใช้ matplotlib เพื่อแสดงภาพดังต่อไปนี้

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

ฉันประหลาดใจที่ไม่มีใครพูดถึงตัวเลือกวิเศษ html เซลล์ จากdocs (IPython แต่เหมือนกับ Jupyter)

%% HTML

Render the cell as a block of HTML

นอกเหนือจากคำตอบอื่น ๆ โดยใช้ HTML (ทั้งใน Markdown หรือใช้%%HTMLเวทย์มนตร์:

หากคุณต้องการระบุความสูงของรูปภาพสิ่งนี้จะไม่ทำงาน:

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

นั่นเป็นเพราะ CSS ใส่สไตล์ใน Jupyter ใช้height: autoต่อค่าเริ่มต้นสำหรับimgแท็กซึ่งแทนที่คุณลักษณะความสูง HTML คุณต้องเขียนทับ CSSheightแอตทริบิวต์แทน:

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

แทรกรูปภาพโดยตรงในสมุดบันทึก Jupyter

หมายเหตุ: คุณควรมีสำเนาของรูปภาพในคอมพิวเตอร์ของคุณ

คุณสามารถแทรกภาพในสมุดบันทึก Jupyter ได้ วิธีนี้คุณไม่จำเป็นต้องแยกรูปภาพไว้ในโฟลเดอร์

ขั้นตอน:

1. แปลงเซลล์เป็นmarkdownโดย:

   • กด M บนเซลล์ที่เลือก
     หรือ
     
   • จากแถบเมนูเซลล์> ประเภทเซลล์> Markdown
     ( หมายเหตุ:สิ่งสำคัญคือการแปลงเซลล์เป็น Markdown มิฉะนั้นตัวเลือก "แทรกรูปภาพ" ในขั้นตอนที่ 2 จะไม่ทำงาน)

2. ตอนนี้ไปที่แถบเมนูและเลือกแก้ไข -> แทรกภาพ

3. เลือกภาพจากดิสก์ของคุณและอัปโหลด

4. กดCtrl+ Enterหรือ+ShiftEnter

สิ่งนี้จะทำให้รูปภาพเป็นส่วนหนึ่งของสมุดบันทึกและคุณไม่จำเป็นต้องอัปโหลดในไดเรกทอรีหรือ Github ฉันรู้สึกว่าสิ่งนี้ดูสะอาดและไม่เกิดปัญหา URL เสียหาย

นี่คือวิธีที่คุณสามารถทำได้ด้วย Markdown:

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

1. ตั้งค่าโหมดเซลล์เป็น Markdown
2. ลากและวางภาพของคุณลงในเซลล์ คำสั่งต่อไปนี้จะถูกสร้างขึ้น:

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

3. ดำเนินการ / เรียกใช้เซลล์และภาพจะปรากฏขึ้น

ภาพนั้นฝังอยู่ใน ipynb Notebook และคุณไม่จำเป็นต้องยุ่งกับไฟล์แยกต่างหาก น่าเสียดายที่นี่ยังไม่สามารถใช้งานกับ Jupyter-Lab (v 1.1.4) ได้

แก้ไข: ทำงานใน JupyterLab เวอร์ชัน 1.2.6

หากคุณต้องการที่จะใช้โน๊ตบุ๊ค Jupyter API (และไม่ IPython หนึ่งอีกต่อไป) ผมพบว่าipywidgets Jupyter ของโครงการย่อย คุณมีImageวิดเจ็ต Docstring ระบุว่าคุณมีvalueพารามิเตอร์ซึ่งเป็นไบต์ ดังนั้นคุณสามารถทำได้:

import requests
from ipywidgets import Image

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

ฉันเห็นด้วยมันง่ายกว่าที่จะใช้สไตล์ Markdown แต่มันจะแสดงให้คุณเห็น Image Notebook Notebook API นอกจากนี้คุณยังสามารถปรับขนาดภาพด้วยwidthและheightพารามิเตอร์

นี่คือโซลูชันสำหรับJupyterและPython3 :

ฉัน droped ImageTestภาพของฉันในโฟลเดอร์ชื่อ ไดเรกทอรีของฉันคือ:

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

เพื่อแสดงภาพฉันใช้การแสดงออกนี้:

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

ยังระวัง/และ\

สิ่งนี้ใช้ได้สำหรับฉันในเซลล์ markdown อย่างใดฉันไม่จำเป็นต้องพูดถึงเฉพาะถ้ามันเป็นภาพหรือไฟล์ที่เรียบง่าย

![](files/picture.png)

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

ตกลงฉันมีปัญหาเดียวกันและนี่คือสิ่งที่ทำงานและสิ่งที่ไม่ได้:

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

ในขณะที่คำตอบข้างต้นมากมายให้วิธีการฝังภาพโดยใช้ไฟล์หรือรหัส Python มีวิธีการฝังภาพในสมุดบันทึก jupyter ตัวเองใช้เพียง markdown และ base64!

หากต้องการดูภาพในเบราว์เซอร์คุณสามารถไปที่ลิงค์data:image/png;base64,**image data here**สำหรับภาพ PNG ที่เข้ารหัส 64 หรือdata:image/jpg;base64,**image data here**สำหรับภาพ JPG ที่เข้ารหัส 64 ลิงค์ตัวอย่างสามารถพบได้ในตอนท้ายของคำตอบนี้

หากต้องการฝังสิ่งนี้ลงในหน้า markdown เพียงใช้โครงสร้างที่คล้ายกันเป็นคำตอบของไฟล์ แต่ใช้ลิงค์ base64 แทน: ![**description**](data:image/**type**;base64,**base64 data**)แทน: ตอนนี้ภาพของคุณจะถูกฝัง 100% ลงในไฟล์ Jupyter Notebook ของคุณ!

ลิงค์ตัวอย่าง: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABHNCSVQICAgIfAhkiAAAAD9JREFUGJW1jzEOADAIAqHx/1+mE4ltNXEpI3eJQknCIGsiHSLJB+aO/06PxOo/x2wBgKR2jCeEy0rOO6MDdzYQJRcVkl1NggAAAABJRU5ErkJggg==

ตัวอย่าง markdown: ![smile](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABHNCSVQICAgIfAhkiAAAAD9JREFUGJW1jzEOADAIAqHx/1+mE4ltNXEpI3eJQknCIGsiHSLJB+aO/06PxOo/x2wBgKR2jCeEy0rOO6MDdzYQJRcVkl1NggAAAABJRU5ErkJggg==)