You are building your notebook and would like to make it more informative and attractive with the inserted image. How to do this? In this post, I will show different approaches to inserting an image into Jupyter Notebook.
1. Drag and drop image to Markdown cell
The most user-friendly way to insert an image into Jupyter Notebook is to drag and drop the image into the notebook. It’s possible only to Markdown cells. The image is encoded with Base64, and its text representation is included in the
ipynb file. The animation below shows how you can do it:
2. Insert image from URL
Inserting an image that is available via URL is very simple. It can be done in the Markdown cell:
![convert notebook to web app](https://raw.githubusercontent.com/mljar/visual-identity/main/mercury/mercury_convert_notebook.png)
There are no quotes or double quotes in the URL. What is more, in the Markdown, you can use the HTML syntax:
<img src="URL-to-image" alt="Alternative text" />
You can also insert an image in the Python cell:
from IPython import display display.Image("URL-to-image")
If your image is not available from the URL, you can use GitHub for this. Create some repository and upload an image file there (this can be easily done on the GitHub website). Then click on the image and click on the
Download button. The GitHub will open a new tab with your image. You can use the URL address in the Jupyter Notebook.
3. Use local file
Instead of using the URL address, you can use local files, just pass the path to the file. It is important to remember that the image path needs to be a subpath of the notebook. For example, you can’t pass the image from a different drive. You can use an image from the directory that is in the same directory as the notebook. You need to remember to add the image to the code repository.
For the Markdown cells:
<img src="path-to-image" alt="Alternative text" />
For Python cells:
from IPython import display display.Image("path-to-image")
Convert image to Base64
You can convert the image to Base64 text representation and use it to display an image. It can be done on one website, for example base64-image.de - upload your image there and copy the output data. You can use the output in the Markdown cell:
<img src="data:image/png;base64,iVBORw0KGgoAAAANS ... the rest of data" />
or in Python cell:
from IPython import display from base64 import b64decode base64_data = "iVBORw0KGgoAAAANSUhEUgAABL ... the rest of data " display.Image(b64decode(base64_data))
This approach should be used for very small images (< 10KB). For large images the final string is very long and makes the Jupyter Notebook and text editors very laggy.
The images in the notebook make it more attractive. We can insert images into the notebook in many ways. My preferred way is to upload images to GitHub and add their URLs in the Markdown.
Convert Python Notebooks to Web Apps
We are working on open-source framework Mercury for converting Jupyter Notebooks to interactive Web Applications.
Articles you might find interesing
Join our newsletter
Subscribe to our newsletter to receive product updates