St.image in sidebar prevents input widgets from working correctly

[tommaso-moro]

Hi all!

I am making an app where I display a small image in the sidebar at all times. However, as the user is browsing through the pages, and interacting with widgets, the image is constantly re-loaded (at every used interaction) due to standard streamlit behaviour.

Even though the image is extremely light, this is severely affecting the user experience. Specifically, most input fields don’t seem to record the user’s value the first time the user inputs them. If a user enters their password and clicks on “sign in” in the authentication page, the sign in won’t work unless they press “sign in” twice - but it does work when the image is not in the sidebar.

I have tried to cache the image loading somehow, by wrapping it in a function with the @st.cache decorator but it didn’t work.

Any help would be appreciated!

[blackary]

Could you share some example code which demonstrates the issue? I’m having trouble reproducing what you’re seeing. For example, this seems to work fine without any noticeable issues caused by the image.

import streamlit as st

st.sidebar.image("https://placekitten.com/200/300")

username = st.text_input("Username")

password = st.text_input("Password", type="password")

if st.button("Submit"):
    st.write(username, password)