Làm cách nào để nhúng hình ảnh hoặc hình ảnh vào máy tính xách tay jupyter, từ máy cục bộ hoặc từ tài nguyên web?

Tôi muốn bao gồm hình ảnh trong một máy tính xách tay jupyter.

Nếu tôi đã làm như sau, nó hoạt động:

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

Nhưng tôi muốn đưa hình ảnh vào một ô đánh dấu và đoạn mã sau gây ra lỗi 404:

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

Tôi cũng đã thử

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

Nhưng tôi vẫn nhận được cùng một lỗi:

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

Bạn không được sử dụng dấu ngoặc kép xung quanh tên của tệp hình ảnh trong đánh dấu!

Nếu bạn đọc kỹ thông báo lỗi của mình, bạn sẽ thấy hai %22phần trong liên kết. Đó là dấu ngoặc kép được mã hóa html.

Bạn phải thay đổi dòng

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

đến

![title](img/picture.png)

CẬP NHẬT

Giả sử, bạn có cấu trúc tệp sau và bạn chạy jupyter notebooklệnh trong thư mục example.ipynbchứa tệp (<- chứa phần đánh dấu cho hình ảnh) được lưu trữ:

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

Có một số cách để đăng một hình ảnh trong sổ ghi chép của Jupyter:

thông qua HTML:

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

Bạn giữ lại khả năng sử dụng các thẻ HTML để thay đổi kích thước, v.v ...

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

Bạn cũng có thể hiển thị hình ảnh được lưu trữ cục bộ, thông qua đường dẫn tương đối hoặc tuyệt đối.

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

nếu hình ảnh rộng hơn cài đặt hiển thị: cảm ơn

sử dụng unconfined=Trueđể vô hiệu hóa độ rộng tối đa của hình ảnh

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

hoặc thông qua markdown:

• đảm bảo ô là một ô đánh dấu và không phải là ô mã, cảm ơn @ 游 凯 trong các nhận xét)
• Xin lưu ý rằng trên một số hệ thống, việc đánh dấu không cho phép khoảng trắng trong tên tệp. Cảm ơn @CoffeeTableEspresso và @zebralamy trong các bình luận)
  (Trên macos, miễn là bạn đang ở trên một ô đánh dấu, bạn sẽ làm như thế này: ![title](../image 1.png)và không phải lo lắng về khoảng trắng).

cho một hình ảnh web:

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

như thể hiện bởi @cristianmtr Chú ý không sử dụng hoặc những dấu ngoặc kép ""hoặc những người ''xung quanh url.

hoặc một địa phương:

![title](img/picture.png)

được chứng minh bởi @Sebastian

Ngoài ra, bạn có thể sử dụng HTML đơn giản <img src>, cho phép bạn thay đổi chiều cao và chiều rộng và vẫn được đọc bởi trình thông dịch đánh dấu:

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

Tôi biết điều này không hoàn toàn phù hợp, nhưng vì câu trả lời này được xếp hạng đầu tiên nhiều lần khi bạn tìm kiếm ' cách hiển thị hình ảnh trong Jupyter ', vui lòng xem xét câu trả lời này.

Bạn có thể sử dụng matplotlib để hiển thị một hình ảnh như sau.

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

Tôi ngạc nhiên không có ai ở đây đã đề cập đến tùy chọn ma thuật tế bào html. từ các tài liệu (IPython, nhưng tương tự cho Jupyter)

%% html

Render the cell as a block of HTML

Ngoài các câu trả lời khác bằng HTML (trong Markdown hoặc sử dụng %%HTMLphép thuật:

Nếu bạn cần chỉ định chiều cao hình ảnh, điều này sẽ không hoạt động:

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

Đó là bởi vì kiểu CSS trong Jupyter sử dụng height: autotheo mặc định cho các imgthẻ, ghi đè lên thuộc tính chiều cao HTML. heightThay vào đó, bạn cần ghi đè lên thuộc tính CSS :

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

Chèn hình ảnh trực tiếp vào sổ ghi chép Jupyter.

Lưu ý: Bạn nên có một bản sao hình ảnh cục bộ trên máy tính của mình

Bạn có thể chèn hình ảnh vào sổ ghi chép Jupyter. Bằng cách này, bạn không cần phải giữ hình ảnh riêng biệt trong thư mục.

Các bước:

1. Chuyển đổi ô thành markdown:

   • nhấn M trên ô đã chọn
     HOẶC
     
   • Từ thanh menu, Ô> Loại ô> Đánh dấu.
     ( Lưu ý: Điều quan trọng là chuyển đổi ô thành Markdown, nếu không, tùy chọn "Chèn hình ảnh" trong Bước 2 sẽ không hoạt động)

2. Bây giờ hãy vào thanh menu và chọn Chỉnh sửa -> Chèn hình ảnh.

3. Chọn hình ảnh từ đĩa của bạn và tải lên.

4. Nhấn Ctrl+ Enterhoặc Shift+ Enter.

Điều này sẽ làm cho hình ảnh như một phần của sổ ghi chép và bạn không cần phải tải lên trong thư mục hoặc Github. Tôi cảm thấy điều này có vẻ sạch sẽ hơn và không dễ bị hỏng URL.

Đây là cách bạn có thể làm điều đó với Markdown:

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

1. Đặt chế độ ô thành Markdown
2. Kéo và thả hình ảnh của bạn vào trong tế bào. Lệnh sau sẽ được tạo:

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

3. Thực thi / Chạy ô và hình ảnh hiển thị.

Hình ảnh thực sự được nhúng vào Sổ tay ipynb và bạn không cần phải loay hoay với các tệp riêng biệt. Rất tiếc, điều này không hoạt động với Jupyter-Lab (v 1.1.4).

Chỉnh sửa: Hoạt động trong JupyterLab Phiên bản 1.2.6

Nếu bạn muốn sử dụng API máy tính xách tay Jupyter (chứ không phải IPython nữa), tôi tìm dự án phụ của iupwidgets Jupyter. Bạn có một Imagewidget. Tài liệu xác định rằng bạn có một valuetham số là byte. Vì vậy, bạn có thể làm:

import requests
from ipywidgets import Image

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

Tôi đồng ý, sử dụng kiểu Markdown đơn giản hơn. Nhưng nó cho bạn thấy API Notebook hiển thị hình ảnh. Bạn cũng có thể thay đổi kích thước hình ảnh với widthvà heightcác tham số.

Đây là một Giải pháp cho Jupyter và Python3 :

Tôi thả hình ảnh của tôi trong một thư mục có tên ImageTest. Thư mục của tôi là:

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

Để hiển thị hình ảnh tôi đã sử dụng biểu thức này:

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

Cũng coi chừng /và\

Điều này làm việc cho tôi trong một tế bào markdown. Bằng cách nào đó tôi không cần đề cập cụ thể nếu đó là một hình ảnh hoặc một tập tin đơn giản.

![](files/picture.png)

Một điều tôi tìm thấy là đường dẫn hình ảnh của bạn phải liên quan đến bất cứ nơi nào máy tính xách tay ban đầu được tải từ đó. nếu bạn cd vào một thư mục khác, chẳng hạn như Pictures, đường dẫn Markdown của bạn vẫn liên quan đến thư mục tải ban đầu.

Đồng ý, tôi đã có những vấn đề tương tự và đây là những gì đã hoạt động và những gì không:

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

Mặc dù rất nhiều câu trả lời ở trên đưa ra cách nhúng hình ảnh bằng tệp hoặc bằng mã Python, có một cách để nhúng hình ảnh vào sổ ghi chép jupyter chỉ bằng cách sử dụng markdown và base64!

Để xem hình ảnh trong trình duyệt, bạn có thể truy cập liên kết data:image/png;base64,**image data here**cho hình ảnh PNG được mã hóa cơ sở 64 hoặcdata:image/jpg;base64,**image data here** cho hình ảnh JPG được mã hóa base64. Một liên kết ví dụ có thể được tìm thấy ở cuối câu trả lời này.

Để nhúng trang này vào trang đánh dấu, chỉ cần sử dụng cấu trúc tương tự như câu trả lời của tệp, nhưng với liên kết base64 thay thế: ![**description**](data:image/**type**;base64,**base64 data**) . Bây giờ hình ảnh của bạn được nhúng 100% vào tệp Notebook Jupyter của bạn!

Liên kết ví dụ: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABHNCSVQICAgIfAhkiAAAAD9JREFUGJW1jzEOADAIAqHx/1+mE4ltNXEpI3eJQknCIGsiHSLJB+aO/06PxOo/x2wBgKR2jCeEy0rOO6MDdzYQJRcVkl1NggAAAABJRU5ErkJggg==

Ví dụ đánh dấu: ![smile](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABHNCSVQICAgIfAhkiAAAAD9JREFUGJW1jzEOADAIAqHx/1+mE4ltNXEpI3eJQknCIGsiHSLJB+aO/06PxOo/x2wBgKR2jCeEy0rOO6MDdzYQJRcVkl1NggAAAABJRU5ErkJggg==)