如何从本地计算机或Web资源将图像或图片嵌入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)

更新

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

/
+-- 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))

或通过降价：

• 确保该单元格是降价单元格，而不是代码单元格，感谢@游凯超在评论中）
• 请注意，在某些系统上，降价标记不允许在文件名中使用空格。感谢评论中的@CoffeeTableEspresso和@zebralamy）
  （在macOS上，只要您位于降价单元格上，您就可以这样做：![title](../image 1.png)，而不必担心空白）。

对于网络图像：

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

如@cristianmtr所示。请注意不要同时使用这些引号""或''网址中的引号。

或本地的：

![title](img/picture.png)

由@Sebastian演示

另外，您可以使用纯HTML <img src>，它允许您更改高度和宽度，并仍由markdown解释器读取：

<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 cell magic选项。来自文档（IPython，但与Jupyter相同）

%% html

Render the cell as a block of HTML

除了使用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

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

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

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

脚步：

1. 将单元格转换为markdown：

   • 在所选单元格上按M
     或
     
   • 在菜单栏中，单元格>单元格类型>降价。
     （注意：将单元格转换为Markdown非常重要，否则，第2步中的“插入图片”选项将无效）

2. 现在转到菜单栏，然后​​选择编辑->插入图像。

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

4. 按Ctrl+ Enter或Shift+ Enter。

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

使用Markdown的方法如下：

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

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

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

3. 执行/运行单元格，图像出现。

该图像实际上是嵌入在ipynb笔记本中的，您无需弄乱单独的文件。不幸的是，这还不适用于Jupyter-Lab（v 1.1.4）。

编辑：在JupyterLab版本1.2.6中工作

如果要使用Jupyter Notebook 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样式更简单。但是它向您显示了图像显示Notebook API。您还可以使用width和height参数调整图像的大小。

这是Jupyter和Python3的解决方案：

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

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

为了显示图像，我使用了以下表达式：

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

还要注意/和\

这在降价单元中对我有用。无论如何，如果图像或简单文件，我都无需特别提及。

![](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代码嵌入图像的方法，但是有一种方法可以仅使用markdown和base64将图像嵌入jupyter笔记本本身！

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

要将其嵌入到markdown页面中，只需使用与文件Answers类似的结构，但要使用base64链接：![**description**](data:image/**type**;base64,**base64 data**)。现在，您的图像已100％嵌入到Jupyter Notebook文件中！

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

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