I have a few html files that get generated in my cloud server by running python scripts. They are arranged in various folder structures. I would like to view them through streamlit app. I found a way to load the html using components.html option of streamlit. However, it doesn’t seem to use correct links for the images inside html file, resulting in images not displaying. I see that python’s default html.server is pretty nice in showing the folder structure and displaying html files from remote server. Is it possible to intergate python’s html server kind of functionality into streamlit?
The trouble is that the files in your repository aren’t automatically served up and made available to the web host. For example, when you use
st.image and feed it a relative path to an image, then Python can get to it as a file saved in the back end. Streamlit will copy that image file and make it available to the web host at
./media/<some hash>.jpg. (I am not clear if this is an actual copying over to another web host file architecture or just some routing that creates the local web paths virtually.)
So, you will either need to host the image files elsewhere or manually serve them up so they can be accessed via web. I was just playing with this recently, and @asehmi has a lovely example. Hybrid architecture media server, media service and Streamlit client app using FastAPI and Python
Thanks for the shoutout @mathcatsand!
Thank you @mathcatsand. If I were to change the links to the image files location for streamlit to access, that would mean I need to update my html files (that have links to the image files). However, these html files are produced by another application and changing them would be trouble. So, I guess, we don’t have a direct and easy way to get this to work
Could you use a dynamic approach and do string replacement? If you serve up all your images and create a dictionary from the old, relative paths to the new, hosted path, you could get around it that way. I’m not sure exactly have diverse the situations are that you need to handle, but it seems doable to programmatically create the different possible relative paths for each image and use string replacement on your html files to change the paths.
I don’t know if there may be a way to recreate the local structure through the file service. As long as there wasn’t a naming or directory clash, perhaps a skilled coder could rework the details to preserve the preexisting relative paths… It’s not something I’ve done so it’s just a “what if” in my head.