Streamlit is an open-source Python module that is used to create interactive dashboards and web apps. The advantage of using Streamlit is that you can plot various plots and images with less effort. Here we will discuss how we can display images in Streamlit from a folder, from the same directory, and from Matplotlib plots as well. If you have struggled to display an image in the Streamlit module, then you have landed on the perfect page. We hope by the end of this short tutorial, you will be able to display the image without any errors in the Streamlit app.
You may also want to learn buttons in Streamlit.
Display an Image In Streamlit App
Well, there can be many cases where you want to show your image to the audiences through the Streamlit App. Sometimes, you want to display the image from another folder, sometimes from the same folder or you may also want to show the plt.show() image in the Streamlit App. Here we will discuss all the cases where you can display images in Streamlit App.
Here we will see the following image displays in Streamlit App.
- Show image in Streamlit from same directory
- Show image in Streamlit from different directory
- Display an image produces in matplotlib
Show an Image From Same Folder
Having an image in the same folder means the image and the .py file of the web app are in the same directory. If this is the case, then you need to just place the name of the image file as shown below:
#importing modules
import streamlit as st
# display the image in streamlit
st.image('image.png')Another method is to use the PIL or any other Python modules to open the image and then display that image in the Streamlit App.
#importing modules
import streamlit as st
from PIL import Image
#opening the image file
image = Image.open('image.png')
# display the image in streamlit
st.image(image)Now, run the web application or refresh the page again to see the displayed image.
Show an Image From a Different Folder
The process of displaying an image from a different directory in the Streamlit app is very similar to the previous one. Here is the code for displaying the image from a different directory.
#importing modules
import streamlit as st
# display the image in streamlit
st.image('folderName/image.png')Hopefully, this will help you to display the image.
Display an Image From Matplotlib Module
Sometimes, we create an image in the Matplotlib module and want to display that image in our Streamlit app. There can be many methods to do this. Here we will go through one of the simplest methods where we will first create an image, then we will save that image, and then open it in Streamlit to display it.
def image_save(result):
plt.imshow(result, cmap='RdYlGn')
plt.colorbar(label='N')
plt.savefig('my_plot.png')This function will take an array and save it as a png file. Now, you can open that png file to show it in your Streamlit App.
# calling the function
image_save(result)
# display an image
st.image('my_plot.png')Hopefully, now you got an idea of how to display an image in the Streamlit App.
Summary
Showing images in Streamlit can be tricky sometimes, especially when we have to create the image from arrays in any other module. The st.image() function in the Streamlit module is used to display the image. It takes the file path as its argument.