将图像插入 IPython 笔记本降价答案

【问题标题】：Inserting image into IPython notebook markdown将图像插入 IPython 笔记本降价
【发布时间】：2012-05-24 14:09:04
【问题描述】：

我开始严重依赖 IPython 笔记本应用程序来开发和记录算法。太棒了;但是有些事情似乎应该是可能的，但我不知道该怎么做：

我想将本地图像插入到我的（本地）IPython 笔记本降价中，以帮助记录算法。我知道足以在降价中添加类似<img src="image.png"> 的内容，但据我所知，这就是我所知道的。我假设我可以将图像放在由 127.0.0.1:8888 （或某个子目录）表示的目录中以便能够访问它，但我不知道该目录在哪里。（我正在使用 mac。）那么，是否有可能在没有太多麻烦的情况下做我想做的事情？

【问题讨论】：

标签： python jupyter-notebook ipython jupyter

【解决方案1】：

将图像导入 Jupyter NB 比大多数人在这里提到的要简单得多。

只需创建一个空的 Markdown 单元格。
然后将图像文件拖放到空白的 Markdown 单元格中。

然后会出现将插入图像的 Markdown 代码。

例如，下面以灰色突出显示的字符串将出现在 Jupyter 单元格中：

![Venus_flytrap_taxonomy.jpg](attachment:Venus_flytrap_taxonomy.jpg)

然后按 Shift-Enter 执行 Markdown 单元格。然后 Jupyter 服务器将插入图像，然后图像就会出现。

我在 Windows 7 上运行 Jupyter 笔记本服务器是：5.7.4 和 Python 3.7.0。

这太简单了！！

截至 2021 年 3 月 18 日的更新：这种简单的“从 Windows 文件系统拖放”方法在 JupyterLab 中仍然可以正常工作。 JupyterLab 插入正确的 HTML 代码以将图像直接永久地嵌入到笔记本中，因此图像存储在 .ipynb 文件中。我在 Windows 10 Python 3.7.9 上运行 Jupyter Lab v2.2.7 在 JupyterLab 中仍然有效。我正在 Windows 10 上使用 Python 3.7.9 运行 Jupyter Lab v2.2.7。

去年某个时候，这在 Jupyter Classic Notebook v6.1.5 中停止工作。我向 Jupyter Classic Notebook 开发人员报告了错误通知。

它在最新版本的 Jupyter Classic Notebook 中再次有效。我刚刚在 2021 年 7 月 15 日在 v6.4 中尝试过。谢谢 Jupyter NB 经典开发者！！

【讨论】：

不幸的是，当 Jupyter Notebook 6.0 版托管在 Google Cloud 中时，此方法不起作用。除了安装拖放式 nbextension 之外，任何人都可以在没有管理员权限的情况下使用解决方法？
我什至从本地机器拖放到我的远程笔记本。谢谢
虽然我无法（如 BND）将图形从本地计算机拖到远程托管的笔记本中，但当我在本地托管时，我能够做到这一点，而且我确认实际图像嵌入在笔记本文件中，因此您可以将 .ipynb 文件发送给其他人，图形将被保留。带有图形的降价单元格在纯文本编辑器中看起来像这样（图像数据已缩短...）：{“附件”：{“download.png”：{“image/png”：“iVBORw0KGgoAAAAN ... U5ErkJggg= =" } },
这种简单的“从 Windows 文件系统拖放”方法在 JupyterLab 中仍然可以正常工作。报告了 Jupyter Classic Notebook v6.x 的错误。
我在 Windows 7 64bit Sp1 下使用 Jupyter Notebook 6.4.4 和 Python 3.8.9，它工作正常。

【解决方案2】：

我永远无法将“插入图像”放入降价单元格中工作。但是，拖放进入了与我的笔记本保存在同一目录中的png文件。它将此文本带入单元格

""

shift + enter > 图像现在显示在笔记本中。

FWIW

【讨论】：

【解决方案3】：

如果您想在 Markdown 单元格中显示图像，请使用：

<img src="files/image.png" width="800" height="400">

如果您想在代码单元格中显示图像，请使用：

from IPython.display import Image
Image(filename='output1.png',width=800, height=400)

【讨论】：

在降价单元格中，对我来说，没有逗号：<img src="files/image.png" width=800 height=400>
HTML 命令中确实不需要逗号。查看我的更新
如果您想控制 Jupyter notebook 中显示图像的大小，这是一个更好的解决方案。否则它可以工作，但这是一个恐怖故事。

【解决方案4】：

在运行此代码之前将默认块从“代码”更改为“Markdown”：

![<caption>](image_filename.png)

如果图像文件在另一个文件夹中，您可以执行以下操作：

![<caption>](folder/image_filename.png)

【讨论】：

【解决方案5】：

你可以在 jupyter notebook 中通过 'pwd' 命令找到你当前的工作目录，不带引号。

【讨论】：

【解决方案6】：

[已过时]

IPython/Jupyter 现在支持扩展模块，可以通过复制粘贴或拖放插入图像。

https://github.com/ipython-contrib/IPython-notebook-extensions

拖放扩展似乎适用于大多数浏览器

https://github.com/ipython-contrib/IPython-notebook-extensions/tree/master/nbextensions/usability/dragdrop

但复制和粘贴仅适用于 Chrome。

【讨论】：

这个答案需要一些支持。很少有人知道 Ipython 扩展。
刚刚尝试在 Safari 和 Chrome 中拖放，对我不起作用（OSX、Py3、所有更新）
您发布的第二个链接已损坏-不再支持扩展程序？
我也找不到扩展了。
是的，Jupyter 在过去三年中有所进步，这个答案已经过时了。

【解决方案7】：

对于那些寻找在 Jupyter 机器上放置图像文件以便可以从本地文件系统显示的位置的人。

我把我的mypic.png 放进去

/root/Images/mypic.png

（即显示在 Jupyter 在线文件浏览器中的 Images 文件夹）

在这种情况下，我需要将以下行放入 Markdown 单元格中以使我的图片显示在记事本中：

![My Title](Images/mypic.png)

【讨论】：

【解决方案8】：

最新版本的 jupyter notebook 本机接受图像的复制/粘贴

【讨论】：

我更喜欢这个选项，因为它将图像嵌入到笔记本二进制文件中。它使笔记本更重，但您不需要将图像保留在相对路径中。

【解决方案9】：

首先确保您在 ipython 笔记本单元格中处于 markdown 编辑模型中

这是别人<img src="myimage.png">提出的方法的另一种方法：

![title](img/picture.png)

如果缺少标题，它似乎也可以工作：

![](img/picture.png)

注意路径中不应有引号。不确定这是否适用于带有空格的路径！

【讨论】：

对我来说，名称中带有空格的图像不会在笔记本中呈现。我删除了空格，我现在可以看到了。

【解决方案10】：

到目前为止给出的大多数答案都朝着错误的方向发展，建议加载其他库并使用代码而不是标记。在 Ipython/Jupyter Notebooks 中它非常简单。确保单元格确实在标记中并显示图像使用：

![alt text](imagename.png "Title")

与提出的其他方法相比，另一个优势是您可以显示所有常见的文件格式，包括 jpg、png 和 gif（动画）。

【讨论】：

很好奇你是怎么知道这个命令的。它是 Jupyter 独有的，还是您在 Jupyter 中使用的某种语言（也许是乳胶格式）来添加图像？
@Alex G，Markdown 是一种具有纯文本格式语法的语言，旨在将其转换为 HTML 和许多其他格式。 Markdown 通常用于使用纯文本编辑器创建富文本。查看以下链接以了解语法：github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet
@PhilippSchwarz 上面的示例是否有一些选项可以控制“粘贴”图像的大小？使用<img...> 标记，这些选项的显示大致类似于<img ... width="480">。
使用它不起作用。 Notebook 正在查看特定位置 /notebooks/ - 这肯定不是 root - 并且本地路径不存在。我发现只使用笔记本 insert image 很有帮助 - 它将图像添加为附件（现在可移植）。
有什么方法可以对名称中有空格的图像文件使用此方法？

【解决方案11】：

我将 IPython 笔记本与图像放在同一个文件夹中。我使用 Windows。图片名称是“phuong huong xac dinh.PNG”。

在 Markdown 中：

<img src="phuong huong xac dinh.PNG">

代码：

from IPython.display import Image
Image(filename='phuong huong xac dinh.PNG')

【讨论】：

文档参考 ipython.readthedocs.io/en/stable/api/generated/… ，尽管使用降价（![alt text](foo.png "the title") 更可取，除非需要使用来自 api 的额外参数。

【解决方案12】：

笔记本目录中的文件在“files/”网址下可用。因此，如果它在基本路径中，它将是<img src="files/image.png">，并且子目录等也可用：<img src="files/subdir/image.png"> 等。

更新：从 IPython 2.0 开始，不再需要 files/ 前缀（参见 release notes）。所以现在<img src="image.png"> 的解决方案可以按预期工作。

【讨论】：

啊，你可能使用的是 0.12，不是吗？提供本地文件目前仅在 master 中可用。是的，“笔记本目录”是笔记本的目录（.ipynb 文件）。
既然是markdown，为什么不用![caption](files/image.png)呢？
@minrk ：它对我不起作用。我放了“ “，但它什么也没显示。 k.png 与 notebook 文件在同一文件夹中。
请重新阅读答案和cmets。您的网址将始终以“files/”开头，因此如果您的笔记本旁边有k.png，则该网址将为src="files/k.png"。
您必须刷新网页才能重新加载给定 url 处的图像。

【解决方案13】：

我使用的是 ipython 2.0，所以只有两行。

from IPython.display import Image
Image(filename='output1.png')

【讨论】：

这是在 code 单元格中显示图像的正确方法。 minrk 的答案是在 markdown 单元格中显示图像的正确方法。
使用 jupyter notebook 4.2.0，除非我也调用display，否则它不会显示图像：from IPython.display import Image, display; display(Image(filename='output1.png'))

【解决方案14】：

minrk 的回答是对的。

但是，我发现图像在打印视图中出现损坏（在我的 Windows 机器上，在 Chrome 浏览器中运行 IPython 版本 0.13.2 的 Anaconda 发行版）

解决方法是改用<img src="../files/image.png">。

这使得图像在打印视图和正常的 iPython 编辑视图中都正确显示。

更新：在我升级到 iPython v1.1.0 时，不再需要这种解决方法，因为打印视图不再存在。事实上，您必须避免这种解决方法，因为它会阻止 nbconvert 工具查找文件。

【讨论】：

如果您想在 Markdown 单元格中显示图像，请使用：

如果您想在 代码单元格 中显示图像，请使用：

如果您想在代码单元格中显示图像，请使用：