将图像嵌入到ipython笔记本中进行发布

Question

我有一个ipython笔记本，它具有来自本地驱动器的嵌入式图像。我期待它与代码单元的输出一起嵌入到JSON中，但是当我分发笔记本时，图像不会显示给用户。在Notebook中嵌入图像的推荐方法是什么，以便在用户重新运行代码单元，清除单元输出等时不会消失？

笔记本电脑系统缓存了包含在![label](image.png)中的图像，但它们只持续到服务笔记本的python“内核”重新启动为止。如果我在磁盘上重命名图像文件，我可以关闭并重新打开笔记本，并且它仍然显示图像;但是当我重新启动内核时它会消失。

编辑：如果我生成图像作为代码细胞输出然后导出笔记本到html，图像被嵌入在HTML作为编码数据。当然，必须有办法挂钩到这个功能，并将输出加载到markdown（或更好的“原始nbconvert”）单元格中？

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

将出口（与ipython nbconvert）为HTML，它包含以下内容：

<div class="output_png output_subarea output_execute_result"> 
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAnAAAAFgCAYAAAA... 
</div> 

然而，即使我手动嵌入这段成降价细胞，我不能得到要显示的图像。我究竟做错了什么？

PS现有（旧）答案给出了一些非常有用的指针，但不是解决方案。

Answer 1

你是否乐意使用额外的代码单元来显示图像？如果是这样，使用此：

from IPython.display import Image 
Image(filename="example.png") 

输出单元将具有嵌入.ipynb文件中的原始图像数据，这样你就可以分享和图像将被保留。

注意，Image类也有一个url关键字，但这只会链接到图像，除非你也指定embed=True（见documentation了解详细信息）。因此，除非您指的是远程服务器上的映像，否则使用filename关键字更为安全。

如果您需要将图像包含在Markdown单元中，即没有单独的代码单元来生成嵌入的图像数据，我不确定是否有简单的解决方案。您可以使用python markdown extension，它允许在降价单元格中动态显示Python变量的内容。但是，该扩展会动态生成降格单元，因此为了在共享笔记本时保留输出，需要使用“安装”一节中提到的预处理器pymdpreprocessor.py运行ipython nbconvert --to notebook original_notebook.ipynb --output preprocessed_notebook。生成的笔记本将数据作为格式为<img src="data:image/png;base64,...">的HTML标签嵌入到降格单元中，因此您可以从preprocessed_notebook.ipynb中删除相应的代码单元格。不幸的是，当我尝试这个时，<img>标签的内容实际上并没有显示在浏览器中，所以不确定这是否是一个可行的解决方案。 ： -/

不同的选择是在代码单元中使用Image类生成上面的图像，然后使用nbconvert和自定义模板从笔记本中删除代码输入单元。详情请参阅this thread。但是，这将剥离所有来自转换笔记本的代码单元，因此它可能不是您想要的。

Answer 2

之所以当你把它放在一个降价细胞中

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAnAAAAFgCAYAAAA... 

标签没有做任何事情，是因为IPython中使用HTML清洁剂（一种叫做Google Caja）是筛选出这个类型的标签（和许多其他）在它可以被呈现之前。

在IPython中的HTML消毒剂可以通过添加下面一行到你的custom.js文件（通常位于~/.ipython/profile_default/static/custom/custom.js）被完全禁用：

iPython.security.sanitize_html = function (html) { return html; }; 

这不是一个很好的解决方案，虽然，因为它带来安全风险，这对分配并没有太大的帮助。

后记：
呈现base64编码字符串作为图像=明显的安全问题，所以应该有卡哈人最终允许这类事情的经过（虽然the related feature request ticket第一次打开背部的方式的能力！在2012年，所以不要屏住呼吸）。