如何在Jupyter Notebook中嵌入本地或网络资源的图片？

Question

我想在Jupyter Notebook中添加图片。

如果我按照以下方式进行操作，它可以正常工作：

```python from IPython.display import Image Image(filename='image.png') ```

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

- Ger

---

请注意，我将图像从我的桌面拖到笔记本电脑上，这很好用。但是我意识到，一个限制是每个Markdown单元格只能有一个图像。 - user1097111

Answer 1

在 markdown 中，你不应该在图片文件名周围使用引号！

如果你仔细阅读错误消息，你会看到链接中有两个 %22。那是 HTML 编码的引号。

你需要改变这一行：

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

到

![title](img/picture.png)

更新

我们假设您具有以下文件结构，并且您在存储example.ipynb文件（<-- 包含图像的Markdown）的目录中运行jupyter notebook命令：

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

- Sebastian Stigler

---

对我来说，将笔记本下载为HTML时无法正常工作。它显示了一个损坏的图像链接。使用 IPython.display.Image 可以按预期工作。 - joelostblom

以上语法不会将图像嵌入到 HTML 文件中。如果您查看 HTML 文件的源代码，您会发现类似于 <img src="img/picture.png" alt="title" > 的条目。要查看图片，您需要将其复制到与 HTML 文件相对应的 img 文件夹中。 - Sebastian Stigler

我怀疑就是这样，谢谢你澄清。我认为这两种方法之间的差异是出乎意料的，至少对我来说决定了选择哪一种，所以我想引起注意。 - joelostblom

在使用Markdown时，请确保图像文件与您的笔记本在同一个目录中。由于某种奇怪的原因（在我的情况下），Jupyter Notebook无法识别完整路径... 使用![title](picture.png)格式插入图片。 - Arun Kumar Khattri

@ArunKumarKhattri - 我也遇到了同样的问题，只有相对路径到笔记本才能工作 - 在我的情况下： - ohad edelstain

Answer 2

在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(url='https://i.ytimg.com/vi/j22DmsZEv30/maxresdefault.jpg', width=1900, unconfined=True))

或者使用 Markdown 的方式：

• 确保单元格是 Markdown 单元格，而不是代码单元格（感谢评论区中的 @游凯超）
• 请注意，在某些系统上，Markdown 不允许文件名中有空格（感谢评论区中的 @CoffeeTableEspresso 和 @zebralamy）
  （在 macOS 上，只要您在 Markdown 单元格上，您可以这样操作：![标题](../image 1.png)，无需担心空格问题）。

对于网络图片：

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

根据 @cristianmtr 的演示，注意不要在网址周围使用这些引号 "" 或那些 ''。或者使用本地网址。

![title](img/picture.png)

由@Sebastian演示。

- Reblochon Masque

---

您能否通过Markdown将本地文件的绝对路径插入进去？我已经尝试了，但好像不起作用。编辑：出于安全原因，Firefox（和Chrome）不允许访问本地文件。 - Ciprian Tomoiagă

@SwimBikeRun 你应该选择正确的单元格类型。你当前的单元格类型必须是代码。 - youkaichao

在macOS上，只要你在一个markdown单元格中，你可以这样做：！[标题]（../图像1.png），不用担心空格 - 在Windows上，我不知道。 - Reblochon Masque

被低估的答案。非常详尽。 - Nathan majicvr.com

Markdown版本不允许文件名中有空格，对于遇到这个问题的人来说。 - CoffeeTableEspresso

Answer 3

或者，您可以使用普通的HTML <img src>，允许您更改高度和宽度，并仍然可以被Markdown解释器读取：

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

- Alistair

---

太好了！我更喜欢这个答案，因为我们可以控制输出大小！ 例如，在使用Pelican工具将Jupyter笔记本发布为静态HTML页面时，这一点非常重要。 - Svend

HTML不需要逗号——只需在属性之间加一个空格——并且建议在所有属性值周围加上引号，例如width="60"。 - colllin

天啊！这太棒了。 - Trect

是的，它很棒 :) 但是...在PDF版本中图像丢失了。太糟糕了。 - babou

这个解决方案在Microsoft Edge上有效，但在Google Chrome上无效。不幸的是，Microsoft Edge一直崩溃，所以不得不回到Chrome。 - Kai

Answer 4

直接在Jupyter笔记本中插入图像。

注意：您应该在计算机上拥有图像的本地副本。

您可以将图像直接插入到Jupyter笔记本中。这样，您无需在文件夹中单独保存图像。

步骤：

1. 通过以下方式将单元格转换为markdown：

   • 在选定的单元格上按 M
     或者
     
   • 在菜单栏中选择 Cell > Cell Type > Markdown 。
     （注意：必须将单元格转换为Markdown，否则Step 2中的“插入图像”选项将不会处于活动状态）

2. 现在进入菜单栏，选择Edit -> Insert Image。

3. 从您的磁盘中选择图像并上传。

4. 按下 Ctrl+Enter 或 Shift+Enter。

这将使图像作为笔记本的一部分，您不需要将其上传到目录或Github中。我觉得这看起来更加整洁，也不容易出现URL失效问题。

- Gaurav Modi

---

救了我！谢谢。 - Mohammad Heydari

Jupyter的开发人员又添加了一个有用的功能。需要注意的一个缺点是：它会在IPyNB Jason代码中包含图像，从而使其变得更大，并且不太适合进行代码修订（例如，在检查差异时）。 - eldad-a

太棒了！这个很好用！非常感谢你！ - WorldLover

有没有办法通过这种方式改变图片的尺寸或大小？否则，对我来说它相当大。 - Hofbr

Markdown似乎假定页面宽度为800像素左右。我将我的“大”图像从720像素宽缩小到360像素宽，然后它在页面上显示为一半大小。 - Andy

这就是方法。这让我能够将我的Jupyter笔记本导出为HTML并仍然看到图片。谢谢！ - ChrisDanger

Answer 5

1. 将单元格模式设置为Markdown。
2. 将图像拖放到单元格中。将创建以下命令：

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

3. 执行/运行该单元格，图像将显示出来。

实际上，图像已嵌入在ipynb笔记本中，您不需要操纵单独的文件。但这在Jupyter-Lab (v 1.1.4)中尚未实现。

编辑：在 JupyterLab 版本 1.2.6 中可用。

- Peter

---

当我想将其下载为HTML嵌入式文件时，出现错误提示：“nbconvert失败：缺少附件：imagen.png”。为什么会这样？ - efueyo

将剪贴板中的图像粘贴也适用于我（在将单元格模式设置为“Markdown”后）。 - CgodLEY

我在想是否可以使用嵌入式图像与 HTML？这样我们就可以指定宽度和高度。 - James Hirschorn

Answer 6

我知道这并不完全相关，但由于当你搜索“如何在Jupyter中显示图片”时，这个答案很多时候排名第一，请也考虑一下这个答案。

您可以使用matplotlib如下显示图像。

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

- codeslord

Answer 7

除了其他使用HTML的答案，可以将其嵌入到Markdown中或使用%%HTML魔法代码：

如果您需要指定图像的高度，则此方法将无效：

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

这是因为Jupyter中的CSS样式默认使用height: auto来处理img标签，这会覆盖HTML中的height属性。你需要覆盖CSS height属性：

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

- Rve

Answer 8

我很惊讶这里没有人提到html单元格魔法选项。 来自文档（IPython，但适用于Jupyter）

%%html

Render the cell as a block of HTML

- Malik A. Rumi

Answer 9

以下是如何使用Markdown完成此操作：

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

- cristianmtr

---

由于某些原因，通过Markdown显示图像对我来说不起作用...您确定语法正确吗，cristianmtr？ - Reblochon Masque

是的，我刚刚再次测试了一下。你确定你将单元格设置为Markdown吗？另外，你使用的IPython/Jupyter版本是什么？我的显示为：“笔记本服务器的版本为4.0.4，正在运行： Python 2.7.8（默认值，2014年6月30日，16:08:48）[MSC v.1500 64位（AMD64）]”这里有一个带有结果的屏幕截图：http://i.imgur.com/4ISJFDE.png - cristianmtr

要警惕路径问题，本地可用的路径在线上可能不行，例如imgs\pic.png在本地可行，在线上则有两个问题：1. 区分大小写（Pic.png） 2. 反斜杠和正斜杠不同。。。:/ - Intelligent-Infrastructure

在 Python 3.8 中运行良好。谢谢。 - james-see

Markdown文件名中不允许有空格，以防其他人遇到此问题。 - CoffeeTableEspresso

Answer 10

如果你想使用 Jupyter Notebook API（而不是 IPython），我建议使用 Jupyter 的子项目 ipywidgets。其中有一个 Image小部件。文档字符串指定了一个value参数，它是一个字节序列。所以你可以这样做：

import requests
from ipywidgets import Image

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

我同意，使用Markdown样式更简单。但它向您展示了图像显示笔记本API。您还可以使用width和height参数调整图像的大小。

- dag

---

似乎选项 value 在此期间已更名为 data。对于本地存储的图像，代码 Image(data=open(filename_png, 'rb').read()) 对我有效。 - jottbe

@jottbe 我仍需要使用 value，因为 data 在 jupyter==1.0.0 notebook==6.4.0 中无法工作。因此解决方案是：Image(value=open(filename_png, 'rb').read())。 - Karol Zlot