Method 1: Display images using markdown syntax
The easiest way is to switch your Jupyter cell to Markdown format and pass the image in Markdown syntax.
The format consists of three parts.
- Exclamation mark!
- square brackets [] Alternate text is displayed if image is not found
- brackets () the image you want to display
The image path can be one of the following
- Image URL
- Local image path (absolute/relative)
Below are examples of each variation.
**Image URL**
**Local Relative Path**
**Local Absolute Path**
Check the code in Jupyter Notebook
trade off:
Strong Points:
- Frank
- Simple syntax and easy to remember
Cons:
- Changes such as resizing are not possible.
The advantage of this approach is that it is very simple. Once you do it a few times, you’ll remember it in the back of your mind. However, the downside is that there is no knob to adjust the image size. This is often necessary when working with images from multiple sources.
Method 2: Display images with HTML syntax
If you’re familiar with front-end stacks, HTML is not foreign to you.
<img src="image_path" width="width_length" height="height_length" alt="alt text">
The src parameter is required, the rest are optional.
<img src="image_path">
Similar to the previous method, image_path can be obtained from various sources as shown below.
**Image URL**<img src="https://i.pinimg.com/564x/88/67/a4/8867a454935fa63595614875e48a6b53--samoyed-funny-samoyed-dogs.jpg">
**Local Relative Path**
<img src="metadata/samoyed.jpg">
**Local Absolute Path**
<img src="mypath/to/metadata/samoyed.jpg">
Check the code in Jupyter Notebook
When you resize an image, the aspect ratio of the image is maintained even if you change either (width/height). This is useful instead of trying to run it several times (between different width and height combinations) to see the result of the image.
<img src="metadata/samoyed.jpg" width="250">
Check the code in Jupyter Notebook
trade off:
Strong Points:
- Can be adjusted in size (width, height, or both)
Cons:
- Adoption curve is small when users are unfamiliar with HTML syntax
Import the required libraries
To display images using Python, install the following libraries: requirements.txt
pip install -r requirements.txt
The dependencies are shown below.
numpy==1.25.0
imread-from-url==0.1.3
opencv-python==4.8.0.74
matplotlib==3.7.2
ipympl==0.9.3
Similarly, the image source can be one of the following options:
# Image URLImage(url = image_url, width=value, height=value)
# Local Relative/Absolute Path
Image(filename = "path/to/image", width=value, height=value)
Image can be adjusted with parameters width and height.
An example is shown below.
# URLImage(url="https://i.pinimg.com/564x/88/67/a4/8867a454935fa63595614875e48a6b53--samoyed-funny-samoyed-dogs.jpg")
# Adjust the size
Image(filename="metadata/samoyed.jpg", width="250") # use either one to keep the aspect ratio
Check the code in Jupyter Notebook
trade off:
Strong Points:
- It works seamlessly during the development phase, especially when using Python.
Cons:
- Low adoption curve for first-time users.
For more advanced tasks such as drawing rectangles on images.
Please check the code below.
%matplotlib inline
%matplotlib widgetimport matplotlib.pyplot as plt
import matplotlib.image as mpimg
import matplotlib.patches as patches
#change R, B axis to correctly display color
outimg = img[:,:,::-1]
imgplot = plt.imshow(outimg, aspect = "auto")
# Create figure and axes
fig, ax = plt.subplots(1)
ax.set_axis_off()
# Display the image
ax.imshow(outimg)
rectleftup = (50, 120)
rectwidth = 260
rectheight = 220
linewidth = 2
# Create a Rectangle patch
# https://matplotlib.org/stable/api/_as_gen/matplotlib.patches.Rectangle.html
rect = patches.Rectangle(rectleftup, rectwidth, rectheight, linewidth=linewidth,
edgecolor='b', fill = False)
# Add the patch to the Axes
_ = ax.add_patch(rect)
Check the code in Jupyter Notebook
Look forward to the next post Part 2: View videos in Jupyter Notebook.
thank you for reading.
