How to show local gif image?

Using Streamlit
1

Hi,
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.

Dave

1 Like
2

How about this:

import streamlit as st

st.markdown("![Alt Text](https://media.giphy.com/media/vFKqnCdLPNOKc/giphy.gif)")

image
image1213×1463 120 KB

2 Likes
3

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

4 
import streamlit as st
import base64

"""### gif from url"""
st.markdown("![Alt Text](https://media.giphy.com/media/vFKqnCdLPNOKc/giphy.gif)")

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

st.markdown(
    f'<img src="data:image/gif;base64,{data_url}" alt="cat gif">',
    unsafe_allow_html=True,
)

Peek 2020-06-11 12-35
Peek 2020-06-11 12-35575×729 1.36 MB

Feature request: https://github.com/streamlit/streamlit/issues/1566

9 Likes
5

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

1 Like
6

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.

7

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

8

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

1 Like
9

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

        st.image(
            "https://media.giphy.com/media/3ohzdIuqJoo8QdKlnW/giphy.gif", # 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](https://media.giphy.com/media/3ohzdIuqJoo8QdKlnW/giphy.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
10

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