如何嵌入图像或图片在jupyter笔记本，无论是从本地机器或从网络资源?

在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单元格，而不是一个代码单元格，谢谢@游凯超在评论中)
• 请注意，在某些系统上，降价不允许文件名中有空格。感谢评论中的@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演示

以下是你如何用Markdown做到这一点:

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

在markdown中，您不能在图像文件的名称周围使用引号!

如果你仔细阅读错误消息，你会在链接中看到两个%22部分。这是html编码的引号。

你得换条线

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

来

![title](img/picture.png)

UPDATE

It is assumed, that you have the following file structure and that you run the jupyter notebook command in the directory where the file example.ipynb (<-- contains the markdown for the image) is stored:

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

如果你想使用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风格更简单。它向你展示了Image display Notebook API。你也可以用width和height参数来调整图像的大小。

下面是Jupyter和Python3的解决方案:

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

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

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

还要注意/和\

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

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

% % html

Render the cell as a block of HTML

这在廉价牢房里很管用。不知何故，我不需要特别提到它是一个图像或一个简单的文件。

![](files/picture.png)

除了使用HTML (Markdown或使用%%HTML魔法)的其他答案:

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

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

这是因为Jupyter中的CSS样式为img标记默认使用height: auto，它覆盖了HTML高度属性。你需要重写CSS的height属性:

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

我知道这不是完全相关的，但由于这个答案在你搜索“如何在木星显示图像”时多次排在第一位，请也考虑一下这个答案。

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

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

我发现的一件事是，你的图像的路径必须是相对于笔记本电脑最初加载的地方。如果你cd到一个不同的目录，如图片，你的Markdown路径仍然相对于原始加载目录。

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

注意:您的计算机上应该有映像的本地副本

您可以将图像插入Jupyter笔记本本身。这样你就不需要将图片单独保存在文件夹中。

步骤:

1. 将单元格转换为markdown
   • 在选定单元格上按M < br >或
     
   • 从菜单栏，单元格>单元格类型> Markdown。
     将单元格转换为Markdown很重要，否则步骤2中的“插入图像”选项将不会激活)
   李< / ul > < / >

   • 现在转到菜单栏，选择编辑->插入图像。

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

   • 按< kbd > Ctrl < / kbd > + < kbd >输入< / kbd >或< kbd >转变< / kbd > + < kbd >输入< / kbd >。

这将使图像作为笔记本的一部分，你不需要在目录或Github上传。我觉得这看起来更干净，不容易破碎的URL问题。

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

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

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

图像实际上嵌入在ipynb Notebook中，您不需要在单独的文件中折腾。不幸的是，这还不能与Jupyter-Lab (v 1.1.4)一起工作。

编辑:工作在JupyterLab版本1.2.6

同意，我有同样的问题，这是什么工作，什么不:

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页面中，只需使用与文件答案类似的构造，但使用base64链接:![**description**](data:image/**type**;base64,**base64 data**)。现在你的图像是100%嵌入到你的Jupyter笔记本文件!

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

我猜你是说在廉价牢房里，在笔记本里。如果是的话，这里有一些最简单的方法:

从本地计算机:

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

这样做的好处是:

• 它很简单，只是拖放

这样做的缺点是:

• 你不能复制并粘贴该链接，并在任何其他单元格中使用它。如果你想在任何其他笔记本单元格中使用相同的图片，你将需要找到图片，再次拖放到单元格中。

• 你应该考虑一个文件管理方案，将允许你再次找到图片，如果你计划使用分配的图片在你的笔记本。

这是一种有效的做事方式，对我来说很管用。

来自网络:

最简单的方法是用你的浏览器找到一张图片，右键点击“复制图像”，粘贴到你想要显示图像的单元格中。

如上所述，这是有警告的，因为你不能复制这个链接并粘贴到另一个单元格。因此，如果您计划再次使用该图像，则必须将其粘贴到另一个单元格中，或者在本地保存此图像。

图像是嵌入在笔记本电脑，所以应该工作在笔记本电脑打开的任何地方。

出于某种原因，没有其他解决方案对我有效。以下是有效的方法:

1. 将单元格更改为markdown
2. 复制过去:

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

3. 在相同的单元格中</div>之后创建空行，并使用鼠标将图像放到这一行中。
4. 你会看到这样的东西:

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

5. 复制yourname.jpg并跳过它而不是name.png
6. 删除![yourname.jpg](attachment:yourname.jpg)。
7. 最终的结果应该是这样的:

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

8. 运行sell (shift+enter)，你将得到你的图像

插入本地显示的图像

观看这段视频(1:36

简而言之:

1. 转到.ipynb所在的位置。
2. 创建名为images的文件夹，并将你想要插入jupyter中的图像粘贴到images文件夹中
在浏览器上打开。ipynb文件，点击单元格，输入:
3. 有一个下拉按钮被称为代码。改成Markdown
4. 华友世纪! !现在通过点击shift + Enter运行代码

参考图片

我对这个主题做了一些研究，并发现了在Jupyter Notebook中插入图像的4种方法，我已经在文章中描述过。

1. 拖放图像到单元格(最简单!)

请将单元格切换为markdown类型，然后将图像拖放到那里。图像将被内部编码为Base64，其文本表示形式将包含在ipynb文件中。我建议这只适用于小图像，因为你的笔记本ipynb文件会变得非常大和滞后(如果有太多的大图像被放入)。

2. 插入托管映像

将图像上传到服务器(可能是Imgur或GitHub)，并在Markdown中输入图像URL:

![alternative text goes here](path-to-the-image)

3.插入本地文件映像

您可以对本地映像使用上述方法，但它需要具有与笔记本相同的根目录。

在Markdown:

![alternative text](path-to-image)

或者你可以使用Python:

from IPython import display
display.Image("path-to-image")

4. 将图像转换为Base64(仅适用于小图像)

与第一步类似，不同之处在于转换到Base64是手动完成的。

Python代码:

from IPython import display
from base64 import b64decode
base64_data = "iVBORw0KGgoAAAANSUhEUgAABL ...  the rest of data "
display.Image(b64decode(base64_data))

应该用于相当小的图像。

我个人对GitHub存储库中托管的图像使用第二种方法。