将图像嵌入到jupyter笔记本中并导出为HTML [英] embedding image into jupyter notebook and exporting to HTML

问题描述

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

I am running Python 3.7 on Windows using pycharm. I have a jupyter notebook and I would like to embed an image into the notebook. I know all the ways of doing standard embedding with markdown language, BUT ideally what I want is:

a.通过markdown语言嵌入图像，即笔记本单元处于'markdown'状态，而不是'Code'状态，并且

a. Embed the image via markdown language, i.e. the notebook cell is in 'markdown' state, not 'Code' state, AND ALSO

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

b. Have it able to export to HTML and retain that image in the HTML file. i.e. on the notebook. I want to click File -> Download as -> HTML (.html), save the notebook file in .html format, and then when I send it to my buddy, the image that I attached is in the notebook, and he sees it.

我知道我可以在一个单元格(代码")中做到这一点:

I know i could do this in a cell ('code'):

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

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

but I do not want to use 'Code', since when I send to my buddy, he will see the In [] code statement and the Out [] of the image in the notebook html file.

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

Note: This would be an image that was on my laptop that I would want in the html formatted exported notebook. It is NOT on the web where he could refer to it with a www type statement. Unless I'm crazy, there is no way to do this with markdown command in a cell, the only way to do it (with the image embedded 'permanently' into the .html format of the notebook), would be via a cell that was in 'Code' celltype.

推荐答案

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

When you use a code cell to show an image and then export the notebook to an HTML file, the image is converted to Base64 and the code directly used in the src attribute of the <img> tag. You can apply the same procedure with images included in markdown cells.

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

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

1. First, encode your image as Base64, e.g. by using one of the online enocders.

2. Create a markdown cell and include an <img> tag which uses your Base64 code, e.g.:

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

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

Evaluate the cell and you should already see your image.

如果您现在将笔记本导出为HTML，则图像应与来自代码单元格的图像一样包含在文件中.

If you now export your notebook to HTML, the image should be included in the file the same way as images from code cells.

此方法的唯一缺点是Markdown单元会被(可能很长的)Base64代码弄得一团糟.但是，这例如可以通过管理.使用专门用于图片的降价单元，而没有其他内容.

The only disadvantage with this approach is that your markdown cell gets cluttered with the (probably long) Base64 code. However, this is manageable by e.g. using a markdown cell dedicated solely to the image without other content.

这篇关于将图像嵌入到jupyter笔记本中并导出为HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！