Displaying image at the same place

Summary

Hi all, I try to make when the st.image(new_image) is called, the place where it display is the same as the st.image(old_image). In other word, the new_image replace the old_image (only display one image) instead of display both the new_image and old_image.

Steps to reproduce

I have the following function:

def main(): st.image(old_image) if st.checkbox("New Layer"): st.image(new_image)

When I click the “checkbox”, it displays a new image underneath the old_image. However, I want to display “new_image” and not “old_image” anymore.

I’d appreciate any suggestions!

[asw-v4]

You should create an empty placeholder instead of an image:

imageLocation = st.empty()

Then you can edit the content in this same location however you want (Even change it from an image to a graph, video or anything else!)

imageLocation = st.empty()
.
.
.
imageLocation.image(old_image)
if st.checkbox('New Layer'):
    imageLocation.image(new_image)

[Linshu107]

Awesome, thank you very much! I want to make a quick update just for future reference. imageLocation = st.empty() . . imageLocation.image(old_image) # no need extra “st.”