在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）放入此文件夹。
传媒企业网站系统使用热腾CMS(RTCMS),根据网站板块定制的栏目，如果修改栏目，需要修改模板相应的标签。站点内容均可在后台网站基本设置中添加。全站可生成HTML，安装默认动态浏览。并可以独立设置SEO标题、关键字、描述信息。源码包中带有少量测试数据，安装时可选择演示安装或全新安装。如果全新安装，后台内容充实后，首页才能完全显示出来。（全新安装后可以删除演示数据用到的图片，目录在https://
例如，您的项目结构可能如下：
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 = ''' ''' user_template = ''' ''' 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("[](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。
