Ghost images | Last image gets displayed when displaying the new image

Using Streamlit
1

Hi team,

I am facing an issue with displaying the images as desired. I am using a file uploader to upload a image and then I display it using st.image (or using the placeholder). But when displaying, it is not displaying the uploaded (current) image, but it will display one previous uploaded image. Like it is lagging one image in displaying. If I refresh my whole page then my current displays fine. However, as per my application, I do not wish to refresh the whole page.

A short gif demo of my issue is as follows,

Steamlit_image_issue
Steamlit_image_issue819×667 2.78 MB

As you can see, the very first image displays fine, but after that it is lagging one image.

Attaching a reproducible code below code is as follows,
Streamlit_image_issue_code

Code

import streamlit as st
import numpy as np
from PIL import Image
import cv2

def main():
 st.title("Image Denoising using AI")
 model_loading_state = st.text('Getting things ready! Please wait...')
 model_loading_state.text('The AI is all set!')
    
uploaded_file = st.file_uploader("Upload a noisy image below...", type=["jpg","png"])
input_file = st.empty()
if uploaded_file is not None:
 input_image = Image.open(uploaded_file).convert('RGB')
        
 open_cv_image = np.array(input_image)
 noisy_image = cv2.resize(open_cv_image, (256, 256))
 input_file.image(noisy_image)
        

if __name__ == '__main__':
    main()

Let me know if you require any additional information.

2

I just copy-pasted your code and tried.
It worked fine for me. So please ensure your scenario is somehow reproducible.