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

虽然上述答案提供了使用文件或Python代码嵌入图像的方法，但是也有一种只使用markdown和base64在jupyter notebook中嵌入图像的方法！要在浏览器中查看图像，可以访问链接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**)。现在您的图像已经完全嵌入到Jupyter Notebook文件中了！示例链接：data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABHNCSVQICAgIfAhkiAAAAD9JREFUGJW1jzEOADAIAqHx/1+mE4ltNXEpI3eJQknCIGsiHSLJB+aO/06PxOo/x2wBgKR2jCeEy0rOO6MDdzYQJRcVkl1NggAAAABJRU5ErkJggg==。示例markdown：![smile](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABHNCSVQICAgIfAhkiAAAAD9JREFUGJW1jzEOADAIAqHx/1+mE4ltNXEpI3eJQknCIGsiHSLJB+aO/06PxOo/x2wBgKR2jCeEy0rOO6MDdzYQJRcVkl1NggAAAABJRU5ErkJggg==)。

以下是与 Jupyter 和 Python3 相关的解决方案：
我将图片放到了一个名为 ImageTest 的文件夹中。 我的目录如下：

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

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

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

还要注意/和\。

在Markdown单元格中，我的这种方法可以正常工作。不知何故，我不需要特别指明它是图像还是简单文件。

![](files/picture.png)

我对这个主题进行了一些研究，发现在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存储库中。

出于某种原因，其他解决方案对我都没有用。这是目前可行的方法：

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），您将看到您的图片

我发现的一件事是，你的图片路径必须相对于笔记本最初加载的位置。如果你切换到另一个目录，比如Pictures，你的Markdown路径仍然相对于原始加载目录。

“Original Answer”翻译成中文是“最初的回答”。

我假设您是在Jupyter笔记本中的Markdown单元格内。如果是这样，以下是两种最简单的方法： 从本地计算机： 使用文件浏览器导航到包含图片的目录，然后将其拖放到要嵌入图片的单元格中。它必须已经处于Markdown模式，否则什么也不会发生。
这种方法的优点是：
- 简单易行，只需拖放即可
这种方法的缺点是：
- 您不能复制并粘贴该链接，并在任何其他单元格中使用它。如果您想在任何其他笔记本单元格中使用相同的图片，则需要再次找到图片，将其拖放到单元格中。 - 如果您计划在笔记本中使用大量图片，则应考虑一个文件管理方案，以便您能够再次找到图片。
这是我使用的一种有效的方法。 从Web： 最简单的方法是使用Web浏览器查找图片，右键单击并“复制图像”，然后将其粘贴到要显示图像的单元格中。
如上所述，这带有一些限制，即您不能将其复制并链接并粘贴到另一个单元格中。因此，如果您计划再次使用该图像，则必须将其粘贴到另一个单元格中或在本地保存此图像。
这些图像嵌入在笔记本中，因此应在打开笔记本的任何位置都可以使用。

插入本地存在的图片

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

---

简而言之：

1. 进入存放.ipynb文件的位置。
2. 创建名为images的文件夹，并将要插入到jupyter中的图像粘贴到该images文件夹中。
3. 在浏览器上打开.ipynb文件，然后单击单元格并键入：
4. 有一个下拉按钮，标记为Code。将其更改为Markdown
5. 太棒了！现在按shift + Enter运行代码即可。

---

参考图像

同意，我也遇到了同样的问题，以下是有效和无效的解决方法：

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