St_canvas does not display background image in multipage streamlit app

Custom Components
1

Hello
I am building a multipage streamlit app and in one of the pages I want to use the awesome streamlit drawable canvas.
Tracing my issue, I found that canvas does not show the background image in case the canvas is called in one of the pages of the app. However, if I use the same code in the main page of the app, the background image is displayed.
Help would be appreciated.

My code snippet is:

col1, col2 = st.columns(2)
    with col1:
        drawing_mode = st.selectbox('Draw',('rect','point'))
    with col2:
        stroke_color = st.color_picker('Stroke Color HEX: ')
    RGBimg = st.file_uploader('Select Image', type=['png','jpg'], key='dset_fu1', accept_multiple_files=False)
    fill_color = 'rgba(255,165,0,0.3)'
    canvas_result = st_canvas(fill_color=fill_color, stroke_width=15, stroke_color=stroke_color, background_color='#000000', background_image=Image.open(RGBimg) if RGBimg else None, update_streamlit=True, height=400, width=400, drawing_mode=drawing_mode, point_display_radius = 5 if drawing_mode=='point' else 0, key='canvas')

My setup is:
Windows 10
Google chrome
python 3.8
streamlit 1.12.2
streamlit-drawable-canvas 0.9.2

1 Like
2

According to this it seems that latest version 0.9.2 messed displaying the background image in a multipage streamlit app. Working with 0.9.0 works just fine.

3

@hanisalah Many thanks for your information. I met this same issue on 0.9.2 version. After using 0.9.0, it works well.

1 Like