如何在Streamlit的components.html中正确使用data_url显示本地图片？

你的代码有三个核心问题导致图片无法显示：

• Python生成的data_url变量没有传递到HTML的JavaScript环境中
• JavaScript函数里的参数名和拼接时用的变量名不一致
• 页面加载时调用函数没有传入实际的base64数据

下面是修正后的最简完整代码：

import streamlit as st
import base64
import streamlit.components.v1 as components

st.set_page_config(layout="wide")

# 读取本地图片并转换为base64格式
with open("mathsisfun.png", "rb") as file_:
    contents = file_.read()
    data_url = base64.b64encode(contents).decode("utf-8")

# 直接将base64数据注入到HTML的img标签中
components.html(
    f"""
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test Image</title>
</head>
<body>
    <img id="ItemPreview" src="data:image/png;base64,{data_url}" alt="Local Image">
</body>
</html>
    """,
    height=200,
)

修改说明： #

1. 用with语句读取文件，自动完成文件关闭，比手动调用close()更安全规范
2. 使用Python的f-string格式化HTML代码，直接把data_url变量注入到img的src属性中，省去冗余的JavaScript逻辑，简洁可靠
3. 移除了不必要的JS函数和页面加载事件，直接在img标签中指定完整的Data URL

如果一定要保留JavaScript函数的写法，可参考以下修改：

import streamlit as st
import base64
import streamlit.components.v1 as components

st.set_page_config(layout="wide")

with open("mathsisfun.png", "rb") as file_:
    contents = file_.read()
    data_url = base64.b64encode(contents).decode("utf-8")

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

该写法的修改点： #

• 用f-string把完整的Data URL直接传入onload的函数调用中
• 统一JavaScript函数的参数名和内部使用的变量名
• 函数内部直接使用传入的完整Data URL，无需再手动拼接前缀

内容的提问来源于stack exchange，提问作者P V