Merge Image with Jupyter Notebook To Be One File-CodePudding

When we load an image in jupyter notebook , in actual we have two files. Is there a way to merge the both files in single note book file ? Thank you .

CodePudding user response：

In code cells

When you use code in code cell like below to show an image from an image file inside a notebook, it will actually get encoded within the notebook in the form of base64:

#use code like below to show images as output line because encodes as Base64 code saved within the notebook file
from IPython.display import Image
Image("<myimage_file>.png")

The easiest way to see that is to run such a cell, save the notebook, and inspect the underlying text of the notebook within a text editor. (This is possible right in Jupyter.)

For the corresponding code, you should now see something like this:

   "cell_type": "code",
   "execution_count": 1,
   "id": "72bb5e3d-85c4-4c82-bb18-b466e06b98e7",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "image/png": "iVBORw0KGgoAAAANSUhEUg ...

The ... represents a long string with the image data encoded in base64. Importantly, if you now take that saved notebook and open a new Jupyter session somewhere else where you don't have that image file and you open up the Jupyter notebook, you'll see the image stays visible even without the image file, as long as you don't try to run the code in the cell. If you don't happen to have another computer with Jupyter handy, you can test this by going here and clicking launch binder to spin up a temporary notebook session accessible in your browser from a remote system served by MyBinder.org then dragging and dropping your saved notebook file in the file browser pane on the left side. Double-click to open the notebook and you should see your notebook open and display the image even though the remote system doesn't have your file. If you run the cell though, it isn't going to like the absence of the file, and so the best practice in data management with Jupyter notebook work is to place the notebook(s) and associated files a project folder and transport the entire directory.

There are ways to go back from base64 to the file, so as long as you have the notebook with the encoding you can regenerate the image, see here which is based on this stackoverflow post to convert the string text to bytes. However, I found that replacing the str.encode(string) part of my suggested code with string.encode(), and according to here that may perhaps be better.

In Markdown cells

Unfortunately, last I knew Markdown cells don't do this behavior and so you have to do additional steps to get an image encoded into the markdown cell of a notebook. It can be done though as discussed at the bottom of this post entitled 'Embedding image in ipython notebook for distribution'. (IPython notebooks are the previous version of what evolved into Jupyter notebooks by adding support for many kernel languages.)

I stored a notebook demonstrating using the outcome of following that process to embed images into markdown code within a notebook here, with some links to what I used to put it together. Looking at the text underlying that notebook in your text editor, you'll see the image code is embedded and by opening it elsewhere, you'll conform that it is portable. Process to generate such base64 encoded image code I adapted from this answer here to 'embedding image into jupyter notebook and exporting to HTML':

%pip install pillow
image_to_convert = "<your_img_file_name_here>.png"
import base64, io, IPython
from PIL import Image as PILImage

image = PILImage.open(image_to_convert )

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)
print("COPY THE TEXT BELOW INTO A MARKDOWN CELL:")
print(html)

In relation to placing the image encoded as Base64 into the img tag, I found this very helpful.

Someone posted code here to take base64-encoded images from notebooks and embed them in markdown; however, I haven't tried it yet. I also have tried the early part of this answer under 'How to embed image or picture in jupyter notebook, either from a local machine or from a web resource?' which is another take on this; however, I did test that resulting code there make a smiley when in a markdown cell in a notebook. (In fact you can take the part between parentheses that begins data and paste into the URL bar of your browser and see an image too.)