如何从本地机器或网络资源将图像或图片嵌入到 jupyter notebook 中？

Question

我想在 jupyter notebook 中包含图像。

如果我执行以下操作，它会起作用：

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

Answer 1

在 Jupyter notebooks 中 post 图像有几种方法：

通过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)

如果图像比显示设置宽： thanks

使用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 不允许在文件名中使用白色 space。感谢评论中的@CoffeeTableEspresso 和@zebralamy）
（在 macOS 上，只要你在降价单元格上，你就会这样做：![title](../image 1.png)，不用担心白色 space）。

网络图片：

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

如@cristianmtr所示注意不要在 url.

周围使用这些引号 "" 或 ''

或本地的：

![title](img/picture.png)

由@Sebastian 展示

Answer 2

以下是使用 Markdown 的方法：

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

Answer 3

Markdown 中的图片文件名不能用引号引起来！

如果您仔细阅读错误消息，您会在 link 中看到两个 %22 部分。那就是 html 编码的引号。

你必须换行

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

到

![title](img/picture.png)

更新

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

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

Answer 4

如果您想使用 Jupyter Notebook API（不再是 IPython），我找到了 ipywidgets Jupyter 的 sub-project。您有一个 Image 小部件。 Docstring 指定您有一个 value 参数，它是一个字节。所以你可以这样做：

import requests
from ipywidgets import Image

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

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

Answer 5

这是 Jupyter 和 Python3:

的解决方案

我将我的图像放在一个名为 ImageTest 的文件夹中。我的目录是：

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

为了显示图像，我使用了这个表达式：

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

还要注意 / 和 \

Answer 6

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

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

Answer 7

我很惊讶这里没有人提到 html 细胞魔法选项。来自 docs（IPython，但 Jupyter 相同）

%%html

Render the cell as a block of HTML

Answer 8

这在降价单元格中对我有用。不知何故，我不需要特别提及它是图像还是简单文件。

![](files/picture.png)

Answer 9

除了使用 HTML 的其他答案（在 Markdown 中或使用 %%HTML 魔法：

如果你需要指定图片高度，这将不起作用：

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

这是因为 Jupyter 中的 CSS 样式默认使用 height: auto 作为 img 标签，它会覆盖 HTML 高度属性。您需要改写 CSS height 属性：

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

Answer 10

我知道这并不完全相关，但由于当您搜索“如何在 Jupyter 中显示图像”时，此答案多次排名第一，请将此答案视为出色地。

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

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

Answer 11

我发现的一件事是您的图像路径必须与笔记本最初加载的位置相关。如果你 cd 到不同的目录，比如 Pictures 你的 Markdown 路径仍然是相对于原始加载目录。

Answer 12

直接在 Jupyter notebook 中插入图像。

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

您可以在 Jupyter notebook 本身中插入图像。这样就不需要把图片单独放在文件夹里了。

步骤：

通过以下方式将单元格转换为 markdown：
- 在 selected 单元格上按 M
  或
- 从菜单栏中，单元格 > 单元格类型 > Markdown。
  （注意： 将单元格转换为 Markdown 很重要，否则步骤 2 中的 "Insert Image" 选项将不会激活）
现在转到菜单栏 select 编辑 -> 插入图像。
Select 从您的磁盘上传图片。
按Ctrl+回车或Shift+输入.

这将使图像成为笔记本的一部分，您无需在目录或 Github 中上传。我觉得这看起来更干净而且不容易损坏 URL 问题。

Answer 13

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

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

Execute/Run 显示单元格和图像。

图像实际上嵌入在 ipynb Notebook 中，您不需要弄乱单独的文件。不幸的是，这还不适用于 Jupyter-Lab (v 1.1.4)。

编辑：适用于 JupyterLab 版本 1.2.6

Answer 14

同意，我遇到了同样的问题，这是有效的，无效的：

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

Answer 15

虽然上面的很多答案都提供了使用文件或 Python 代码嵌入图像的方法，但有一种方法可以仅使用 markdown 和 base64 将图像嵌入到 jupyter notebook 中！

要在浏览器中查看图像，您可以访问 link data:image/png;base64,**image data here** 查看 base64 编码的 PNG 图片，或访问 data:image/jpg;base64,**image data here** 查看 base64 编码的 JPG 图片。示例 link 可以在此答案的末尾找到。

要将其嵌入降价页面，只需使用与文件答案类似的结构，但使用 base64 link 代替：![**description**](data:image/**type**;base64,**base64 data**)。现在您的图像已 100% 嵌入到您的 Jupyter Notebook 文件中！

示例 link：data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABHNCSVQICAgIfAhkiAAAAD9JREFUGJW1jzEOADAIAqHx/1+mE4ltNXEpI3eJQknCIGsiHSLJB+aO/06PxOo/x2wBgKR2jCeEy0rOO6MDdzYQJRcVkl1NggAAAABJRU5ErkJggg==

降价示例： ![smile](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABHNCSVQICAgIfAhkiAAAAD9JREFUGJW1jzEOADAIAqHx/1+mE4ltNXEpI3eJQknCIGsiHSLJB+aO/06PxOo/x2wBgKR2jCeEy0rOO6MDdzYQJRcVkl1NggAAAABJRU5ErkJggg==)

Answer 16

我假设您的意思是在 jupyter 笔记本内的降价单元格中。如果是这样，以下是两者最简单的方法：

来自本地计算机：

使用您的文件浏览器，导航到包含您的图片的目录。然后，将其拖放到要嵌入图片的单元格中。它必须已经处于降价模式，否则什么也不会发生。

这样做的优点是：

很简单，只需拖放即可

这样做的缺点：

您不能复制并粘贴 link，并在任何其他单元格中使用它。如果你想在任何其他笔记本单元格中使用相同的图片，你需要找到图片，再次拖放到单元格中。
如果您打算在笔记本中使用大量图片，您应该考虑一个允许您再次查找图片的文件管理方案。

这是一种行之有效的方法，对我有用。

来自网络：

最简单的方法是使用网络浏览器找到一张图片，右键单击并“复制图片”，将其粘贴到要显示图片的单元格中。

如上所述，这确实有一些注意事项，因为您不能复制它并 link 并将其粘贴到另一个单元格中。因此，如果您打算再次使用该图像，则必须将其粘贴到另一个单元格，或者将此图像保存在本地。

图像嵌入在笔记本中，因此可以在打开笔记本的任何地方使用。

Answer 17

出于某种原因，没有其他解决方案适合我。这是什么工作：

将单元格更改为 markdown
复制过去：

<div>
<img src="attachment:name.png" width="600"/>
</div>

在同一单元格中的 </div> 之后创建一个空行，然后使用鼠标将图像拖放到该行中。
你会看到类似的东西：

<div>
<img src="attachment:name.png" width="600"/>
</div>
![yourname.jpg](attachment:yourname.jpg)

复制 yourname.jpg 并通过它而不是 name.png
删除 ![yourname.jpg](attachment:yourname.jpg).
最终结果应如下所示：

<div>
<img src="attachment:yourname.jpg" width="600"/>
</div>

运行卖出（shift+enter），你将得到你的形象

Answer 18

插入本地存在的图像

快速解决方案：观看此视频 (1:36) https://www.youtube.com/watch?v=Vw1EZh1My8s

简而言之：

转到您的 .ipynb 所在的位置。
创建名为 images 的文件夹，然后将要插入到 jupyter 中的图像粘贴到该图像文件夹中
在浏览器中打开 .ipynb 文件并点击单元格并输入：
有一个下拉按钮被称为代码。将其更改为 Markdown
欢呼！！现在运行通过点击 shift + Enter

参考图片

如何从本地机器或网络资源将图像或图片嵌入到 jupyter notebook 中？

How to embed image or picture in jupyter notebook, either from a local machine or from a web resource?

python

image

python-3.x

jupyter

jupyter-notebook

通过HTML：

或通过降价：

直接在 Jupyter notebook 中插入图像。