Streamlit应用中HTML模板引用本地图片的方法-Python教程-PHP中文网

Streamlit应用中HTML模板引用本地图片的方法

碧海醫心

发布： 2025-10-13 14:03:01

原创

696人浏览过

Streamlit应用中HTML模板引用本地图片的方法

在streamlit应用中，当使用html模板（如st.markdown）嵌入本地图片时，可能会遇到图片无法显示的问题。本文将详细阐述如何通过修改streamlit的配置config.toml文件来启用静态文件服务，并指导用户正确组织本地图片资源，确保这些图片能在html模板中被成功加载和展示。

Streamlit以其简洁高效的特性广受开发者喜爱，但在构建复杂的用户界面时，我们常需借助HTML模板来实现更灵活的布局和样式。此时，若尝试在这些HTML模板中引用本地存储的图片资源，可能会发现图片无法正常显示，这通常是由于Streamlit默认的安全策略和文件服务机制所致。

理解Streamlit的静态文件服务机制

Streamlit出于安全和性能考虑，默认情况下不会直接对外提供应用目录下的任意文件访问权限。这意味着，即使图片文件存在于项目目录中，也无法通过简单的相对路径或绝对路径在HTML模板中直接引用。为了解决这一问题，Streamlit提供了一个内置的静态文件服务功能，允许开发者指定一个目录作为静态资源服务器的根目录。

启用静态文件服务

要使Streamlit能够服务本地图片，我们需要修改其配置文件config.toml。

定位或创建config.toml文件：config.toml文件通常位于您的用户根目录下的.streamlit/文件夹中（例如：Windows系统在C:\Users\YourUser\.streamlit\，Linux/macOS在~/.streamlit/）。如果该文件或文件夹不存在，请手动创建。

立即学习“前端免费学习笔记（深入）”；
添加配置项： 在config.toml文件中，添加或修改以下内容以启用静态文件服务：
```
# .streamlit/config.toml
[server]
enableStaticServing = true
```
登录后复制
enableStaticServing = true这一行指令Streamlit启用静态文件服务。

组织本地图片资源

启用静态文件服务后，您需要将所有希望通过HTML模板引用的本地图片放置在一个特定的目录中。Streamlit会将您的应用根目录下的static文件夹（或您在配置中指定的其他文件夹）作为静态资源的提供源。

推荐做法： 在您的Streamlit应用的主脚本（例如app.py）所在的目录下，创建一个名为static的文件夹。将所有本地图片（如ghog1.jpg）放入此文件夹。

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

查看详情

例如，您的项目结构可能如下：

my_streamlit_app/
├── app.py
└── static/
    └── ghog1.jpg
    └── myimage.png

登录后复制

在HTML模板中引用图片

一旦静态文件服务被启用且图片放置在正确的static文件夹中，您就可以在HTML模板中通过相对路径引用这些图片了。引用路径应以/static/开头，后跟图片在static文件夹中的相对路径。

例如，如果ghog1.jpg位于my_streamlit_app/static/目录下，则在HTML模板中的src属性应设置为/static/ghog1.jpg。

示例代码：

假设您的app.py中包含以下HTML模板：

import streamlit as st

# 假设bot_template和user_template是您的HTML模板字符串
bot_template = '''
<div class="chat-message bot">
    <div class="avatar">
        <img src="https://i.ibb.co/cN0nmSj/Screenshot-2023-05-28-at-02-37-21.png" 
style="max-height: 78px; max-width: 78px; border-radius: 50%; object-fit: cover;">
    </div>
    <div class="message">{{MSG}}</div>
</div>
'''

user_template = '''
<div class="chat-message user">
    <div class="avatar">
        <img src="/static/ghog1.jpg" style="max-height: 78px; max-width: 78px; border-radius: 50%; object-fit: cover;">
    </div>    
    <div class="message">{{MSG}}</div>
</div>
'''

st.title("聊天机器人示例")
st.markdown(bot_template.replace("{{MSG}}", "你好，我是机器人！"), unsafe_allow_html=True)
st.markdown(user_template.replace("{{MSG}}", "你好，我是用户！"), unsafe_allow_html=True)

# 另一种直接引用静态资源的方式（非HTML模板，但展示路径用法）
# 这里的 'static/myimage.png' 是相对于应用根目录的路径
st.markdown("[![点击我](static/myimage.png)](https://streamlit.io)", unsafe_allow_html=True)

# 注意：在HTML模板的src属性中，通常建议使用以 '/' 开头的绝对路径 '/static/myimage.png'，
# 以确保在不同页面或路由下路径解析的稳定性。

登录后复制

注意事项：

src属性中的路径必须以/static/开头，这表示从静态文件服务的根目录开始查找。
确保您的config.toml文件被Streamlit正确加载。修改后可能需要重启Streamlit应用才能生效。
st.markdown函数在渲染HTML时，需要设置unsafe_allow_html=True以允许嵌入原始HTML内容。
图片文件的大小和格式也可能影响加载性能，建议对图片进行优化。

总结

通过简单地在.streamlit/config.toml中设置enableStaticServing = true，并遵循将本地图片放置在static目录的约定，Streamlit应用就能在HTML模板中成功加载并展示本地图片。这一机制不仅解决了本地图片引用问题，也为Streamlit应用提供了更丰富的界面定制能力，使其能够更好地融合自定义HTML和CSS。

以上就是Streamlit应用中HTML模板引用本地图片的方法的详细内容，更多请关注php中文网其它相关文章！