How to display the .PNG file inside HTML component?

[randyzwitch]

Hi @Shikun_Chen, welcome to the Streamlit community!

The problem you are running into here is that the file reference for “Regression.png” isn’t reachable from the web browser, because the browser doesn’t have access to that file. We have an open issue for people to provide content from a directory as you’re trying to do:

Serving content from static location

In the meantime, you can see the following post, which shows how to use the open file functionality along with f-strings to embed the bytes into your code:

How to show local gif image?

import streamlit as st import base64 """### gif from url""" st.markdown("") """### gif from local file""" file_ = open("/home/rzwitch/Desktop/giphy.gif", "rb") contents = file_.read() data_url = base64.b64encode(contents).decode("utf-8") file_.close() st.markdown( f'<img src="data:image/gif;base64,{data_url}" alt="cat gif">', unsafe_allow_html=True, ) [Peek 2020-06-11 12-35] Feature request: https://github.com/stream…

Best,
Randy