Untitled

import base64

import requests
import streamlit as st
import streamlit.components.v1 as components


st.set_page_config(layout="wide")


def get_data_img(img_fp: str):
    if img_fp.startswith("http"):
        content = requests.get(img_fp).content
    else:
        with open(img_fp, "rb") as f:
            content = f.read()

    return base64.b64encode(content).decode("utf-8")


# data_url = get_data_img("mathisfun.png")
# type_img = "png"
data_url = get_data_img("https://www.mathsisfun.com/images/style/logo.svg")
type_img = "svg+xml"

# with JS
components.html(
    f"""
<!DOCTYPE html>
<html lang="en">
   <head>
      <script>
         function loadImg(data_url)
         {{
         var itemPrev = document.getElementById("ItemPreview");
         itemPrev.src = "data:image/{type_img};base64," + data_url;
         }}
      </script>
      <meta charset="UTF-8">
      <title>Test Image</title>
   </head>
   <body onload="loadImg('{data_url}')">
      <img id="ItemPreview" src="">
   </body>
</html>
""",
    height=200,
)

# without JS
# components.html(
#     f"""
#     <!DOCTYPE html>
#     <html lang="en">
#     <head>
#         <meta charset="UTF-8">
#         <title>Test Image</title>
#     </head>
#     <body>
#         <img src="data:image/{type_img};base64,{data_url}">
#     </body>
#     </html>
#     """,
#     height=200,
# )