将图像嵌入到jupyter笔记本中并导出为HTML

Question

我正在Windows上使用pycharm运行Python 3.7。我有一个Jupyter笔记本，我想将图像嵌入到笔记本中。我知道使用markdown语言进行标准嵌入的所有方式，但理想情况是我想要的是：

一种。通过降价语言嵌入图像，即笔记本单元处于“降价”状态，而不是“代码”状态，并且

b。它能够导出为HTML并将该图像保留在HTML文件中。即在笔记本上。我要单击文件->下载为-> HTML（.html），以.html格式保存笔记本文件，然后将其发送给好友时，我附加的图像在笔记本中，他看到了。

我知道我可以在单元格（“代码”）中执行此操作：

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

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

注意：这将是笔记本电脑上的图像，我希望在html格式的导出笔记本电脑中使用该图像。在网络上，他无法通过www类型声明来引用它。除非我发疯，否则无法通过单元格中的markdown命令执行此操作，唯一的方法（将图像“永久”嵌入到笔记本的.html格式中）是通过单元格处于“代码”单元格类型。

Answer 1

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

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

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

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

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

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

这种方法的唯一缺点是您的 Markdown 单元格被（可能很长）Base64 代码弄得乱七八糟。然而，这可以通过例如使用专用于图像而没有其他内容的降价单元来管理。

Answer 2

您可以安装Unofficial Jupyter Notebook Extensions。

它有一些有趣的扩展（例如拼写检查器、可折叠标题等）。扩展之一是使用嵌入式图像导出 HTML，它完全符合您的要求。

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

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

然后您将在 Jupyter 主页中看到一个新选项卡 ( Nbextensions)，您可以在其中启用和配置不同的扩展。

启用“导出带有嵌入图像的 HTML”后，您将在“文件-下载为”菜单中看到相应的选项。

Answer 3

我的完整解决方案基于 Milania 和

• 使用 base64 编码图像文件
• how-to-base64-encode-an-image-using-python
• 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)