embedding image into jupyter notebook and exporting to HTML

问题

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. Embed the image via markdown language, i.e. the notebook cell is in 'markdown' state, not 'Code' state, AND ALSO

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")

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.

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.

回答1:

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.

First, encode your image as Base64, e.g. by using one of the online enocders.
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.

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

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.

回答2:

My complete solution is based on Milania and

encoding-an-image-file-with-base64
how-to-base64-encode-an-image-using-python
BytesIO.getvalue

the code

    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)

来源：https://stackoverflow.com/questions/51975699/embedding-image-into-jupyter-notebook-and-exporting-to-html

标签

jupyter-notebook

jupyter