How to show local gif image?

I want to show gif image in streamlit app. Like the st.image function doesn’t support gif format. And I try to use st.markdown:

st.markdown('<img src="./png_to_gif.gif"/>', unsafe_allow_html=True)

but still not work. So how can I do. Thanks very much.


How about this:

import streamlit as st

st.markdown("![Alt Text](")


Hi randyzwitch:
Thanks for your reply. But I want to show local gif file, the st.markdown does not support the local image file.

import streamlit as st
import base64

"""### gif from url"""
st.markdown("![Alt Text](")

"""### gif from local file"""
file_ = open("/home/rzwitch/Desktop/giphy.gif", "rb")
contents =
data_url = base64.b64encode(contents).decode("utf-8")

    f'<img src="data:image/gif;base64,{data_url}" alt="cat gif">',

Feature request:


With no markdown ==> st.image("my_logo.gif) work

Unfortunately right now, st.image only works with JPG or PNG, but there’s no reason it can’t work with GIF in the future.

ah ok I use st.image() but my logo is not an animated image, sorry

Hi, randyzwitch:
the second solution is what i want. Thanks very much.

1 Like

In the current release of streamlit we can use the following:

            "", # I prefer to load the GIFs using GIPHY
            width=400, # The actual size of most gifs on GIPHY are really small, and using the column-width parameter would make it weirdly big. So I would suggest adjusting the width manually!

NOTE: A downside to this w.r.t UI is the image is left-aligned which might not look attractive😥 in some situations.

In addition to this, using the markdown feature (as discussed earlier) to load the gif works too but has a limitation of altering the size.:roll_eyes:

st.write("![Your Awsome GIF](")

Your Awsome GIF

Some possible workaround😅:

  • Using custom css to position the image as appropriate. However, the streamlit community currently does not suggest doing it as a best practice
1 Like

Thank you so much randyzwitch for the very wonderful idea. This is really the answer I sought. Thanks.