I want to display a local image in streamlit app using components.html. But it is not geting displayed.
Following is code I am using:
import streamlit as st
import base64
st.set_page_config(layout="wide")
import streamlit.components.v1 as components
file_ = open("mathsisfun.png", "rb")
contents = file_.read()
data_url = base64.b64encode(contents).decode("utf-8")
file_.close()
components.html(
"""
<!DOCTYPE html>
<html lang="en">
<head>
<script>
function loadImg(dataUrl)
{
document.getElementById("ItemPreview").src = "data:image/png;base64," + data_url;
}
</script>
<meta charset="UTF-8">
<title>Test Image</title>
</head>
<body onload="loadImg(dataUrl)">
<img id="ItemPreview" src="">
</body>
</html>
""",
height=200,
)
How to use the byte data “data_url” in components.html() code?