将图像嵌入Jupyter笔记本并导出为HTML

Question

我正在使用Pycharm在Windows上运行Python 3.7。我有一个Jupyter笔记本，希望将图片嵌入到笔记本中。我知道如何使用Markdown语言进行标准嵌入，但是理想情况下：

a. 图片通过Markdown语言嵌入，在'Markdown'状态下的笔记本单元格中，而不是'Code'状态下，并且

b. 可以导出到HTML并在HTML文件中保留该图像。也就是说，在笔记本电脑中，我想要点击“文件-> 下载为-> HTML (.html)”，将笔记本文件保存为.html格式，然后将其发送给我的朋友时，附加的图像显示在笔记本电脑中。

我知道我可以在一个（'code'）单元格中这样做：

from IPython.display import Image
Image(filename="myfile.jpg")

但我不想使用'Code'，因为当我发送给我的好友时，他将看到笔记本html文件中的In []代码语句和图像的Out []。

注意：这将是我笔记本电脑上的图像，我希望它以html格式导出为笔记本。它不在网络上，他不能通过www类型语句引用它。除非我疯了，否则在单元格中使用markdown命令无法实现此目的，唯一可以（将图像“永久”嵌入笔记本的.html格式中）的方法是通过“Code”单元格类型的单元格。

- TexasTom

Answer 1

当您使用代码单元格显示图像，然后将笔记本导出为HTML文件时，图像会转换为Base64，并直接在<img>标记的src属性中使用代码。您可以对包含在markdown单元格中的图像执行相同的过程。

1. 首先，使用在线编码器之一将您的图像编码为Base64。

2. 创建一个Markdown单元格，并包含一个<img>标记，该标记使用您的Base64代码，例如：

<img src="data:image/png;base64,CODE_FOLLOWS_HERE" />

评估单元格，您应该已经看到您的图片。

如果现在将您的笔记本导出为HTML，该图片应以与代码单元格中的图片相同的方式包含在文件中。

此方法唯一的缺点是，您的markdown单元格会因（可能很长的）Base64代码而变得凌乱。但是，这可以通过使用专门用于图像的markdown单元格而没有其他内容来进行管理。

- Milania

---

此外，您可以在最后一个引号符和 /> 之间添加类似于 style="max-width:150%; width: 150%" 的内容，以使图像显示比当前默认单元格区域更大，并带有滚动条（如果需要的话）。 （基于此处。） - Wayne

Answer 2

你可以安装 非官方 Jupyter 笔记本扩展。它有一些有趣的扩展（例如拼写检查、可折叠标题等）。其中一个扩展是 导出带嵌入式图像的 HTML，恰好满足你的要求。

要使用 pip 安装 Nbextensions，请执行以下操作：

$ pip install jupyter_contrib_nbextensions
$ pip install jupyter_nbextensions_configurator
$ jupyter contrib nbextension install --user 
$ jupyter nbextensions_configurator enable --user

然后你将会在Jupyter主页看到一个新的标签页(Nbextensions)，在那里你可以启用和配置不同的扩展。

启用"Export HTML With Embedded Images"之后，你将在"文件-下载为"菜单中看到相应选项。

- zardosht

---

选项是“导出嵌入式HTML”...而且与其他两个答案相比，这个答案最容易。 - taufikedys

Answer 3

我的完整解决方案基于Milania，并使用以下内容：

• base64编码图像文件
• 如何使用Python进行base64编码图像
• BytesIO.getvalue

代码：

    import base64, io, IPython
    from PIL import Image as PILImage

    image = PILImage.open(image_path)

    output = io.BytesIO()
    image.save(output, format='PNG')
    encoded_string = base64.b64encode(output.getvalue()).decode()

    html = '<img src="data:image/png;base64,{}"/>'.format(encoded_string)
    IPython.display.HTML(html)

- venergiac

Answer 4

对于我来说，在 Visual Studio Code 上，像这样做就可以了（在一个 markdown 单元格中，如您所请求的那样，并且您想要嵌入笔记本并进一步导出到 html 输出的图像）：

<figure>
<img src="./notebook_img/diptera_taxat_yes_no.jpg" width="200"/>
<figcaption>Limit the search on Diptera</figcaption>
</figure>

图片位于笔记本所在位置的"./notebook_img"文件夹中（在这种意义上，笔记本位于当前目录下）。

当阅读HTML导出文件时，您的朋友将无法看到上面的代码，所以我理解这应该满足了所需的要求。他也不需要"notebook_img"文件夹。

- Valentin_Ștefan