2 1 Displaying Images Explained

Key Concepts

• st.image: A function to display images in Streamlit.
• Image Source: The location or URL of the image file.
• Caption: Optional text displayed below the image.
• Width: Optional parameter to control the width of the displayed image.

st.image

st.image is a Streamlit function used to display images in your application. This function can load images from local files or URLs and display them within the app.

Image Source

The image source can be a local file path or a URL. When using a local file, ensure that the file is accessible within the project directory. For URLs, provide the full web address of the image.

Caption

The caption is an optional text that appears below the image. It can be used to provide additional context or information about the image.

Width

The width parameter allows you to control the size of the displayed image. By specifying a width, you can ensure that the image fits well within the layout of your application.

Examples

Example 1: Displaying a Local Image

import streamlit as st

st.image("local_image.jpg", caption="A local image")
    

Example 2: Displaying an Image from a URL

import streamlit as st

st.image("https://example.com/image.jpg", caption="An image from a URL")
    

Example 3: Controlling Image Width

import streamlit as st

st.image("local_image.jpg", caption="A local image with controlled width", width=300)
    

Analogies

Think of st.image as a digital picture frame in your Streamlit app. The image source is like the photo you place in the frame, the caption is like the description written on the back of the photo, and the width is like adjusting the size of the frame to fit the photo perfectly.