将图像嵌入到 jupyter notebook 并导出为 HTML

Question

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

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

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

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

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

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

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

Answer 1

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

1. 首先，将图像编码为 Base64，例如通过使用 online enocders 之一。

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

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

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

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

这种方法的唯一缺点是您的降价单元格会被（可能很长）Base64 代码弄乱。但是，这可以通过例如使用专门用于图像的降价单元格，没有其他内容。

Answer 2

您可以安装Unofficial Jupyter Notebook Extensions。

它有一些有趣的扩展（例如拼写检查器、可折叠标题...）。其中一个扩展是Export HTML With Embedded Images，它正是你想要的。

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

$ 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 和

• encoding-an-image-file-with-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)