Hello there đź‘‹

Thanks for stopping by! We use cookies to help us understand how you interact with our website.

By clicking “Accept all”, you consent to our use of cookies. For more information, please see our privacy policy.

Media elements

It's easy to embed images, videos, and audio files directly into your Streamlit apps.

screenshot

Image

Display an image or list of images.

st.image(numpy_array) st.image(image_bytes) st.image(file) st.image("https://example.com/myimage.jpg")
screenshot

Logo

Display a logo in the upper-left corner of your app and its sidebar.

st.logo("logo.jpg")
screenshot

Audio

Display an audio player.

st.audio(numpy_array) st.audio(audio_bytes) st.audio(file) st.audio("https://example.com/myaudio.mp3", format="audio/mp3")
screenshot

Video

Display a video player.

st.video(numpy_array) st.video(video_bytes) st.video(file) st.video("https://example.com/myvideo.mp4", format="video/mp4")

Third-party components

These are featured components created by our lovely community. For more examples and inspiration, check out our Components Gallery and Streamlit Extras!

screenshot

Image Comparison

Compare images with a slider using JuxtaposeJS. Created by @fcakyon.

from streamlit_image_comparison import image_comparison image_comparison(img1="image1.jpg", img2="image2.jpg",)
screenshot

Streamlit Cropper

A simple image cropper for Streamlit. Created by @turner-anderson.

from streamlit_cropper import st_cropper st_cropper(img, realtime_update=realtime_update, box_color=box_color, aspect_ratio=aspect_ratio)
screenshot

Image Coordinates

Get the coordinates of clicks on an image. Created by @blackary.

from streamlit_image_coordinates import streamlit_image_coordinates streamlit_image_coordinates("https://placekitten.com/200/300")
Previous: Input widgetsNext: st.audio
forum

Still have questions?

Our forums are full of helpful information and Streamlit experts.