本文档旨在解决在使用 Streamlit 框架开发 Python 应用时，如何通过 HTML 模板加载本地图片的问题。我们将介绍如何配置 Streamlit 以允许静态资源服务，并提供示例代码展示如何在 HTML 模板中使用本地图片。通过本文，你将能够轻松地在 Streamlit 应用中集成本地图片资源。
在使用 Streamlit 构建 Web 应用时，经常需要在 HTML 模板中展示图片。如果图片资源位于本地文件系统中，直接使用相对路径可能无法正确加载。这是因为 Streamlit 默认情况下不提供静态资源服务。为了解决这个问题，我们需要配置 Streamlit 以允许静态资源服务，并确保 HTML 模板中的图片路径指向正确的静态资源位置。
配置 Streamlit 允许静态资源服务
Streamlit 提供了一个配置选项，允许我们启用静态资源服务。通过修改 Streamlit 的配置文件 config.toml，我们可以指定一个目录作为静态资源目录，Streamlit 将会从该目录中提供静态文件，例如图片、CSS 文件和 JavaScript 文件。
立即学习“前端免费学习笔记（深入）”；
找到 config.toml 文件： 该文件通常位于用户根目录下 .streamlit 文件夹中。如果没有该文件，可以手动创建。
修改 config.toml 文件： 在文件中添加以下配置项：
[server]enableStaticServing = true
这个配置项告诉 Streamlit 启用静态资源服务。默认情况下，Streamlit 会从名为 “static” 的文件夹中提供静态资源。你也可以通过配置 staticContentDir 修改默认的静态资源目录。
在 HTML 模板中使用本地图片
启用静态资源服务后，我们就可以在 HTML 模板中使用本地图片了。假设我们的项目结构如下：
my_app/├── app.py├── static/│ └── myimage.png└── .streamlit/ └── config.toml
其中，app.py 是 Streamlit 应用的主文件，static 文件夹包含静态资源，myimage.png 是我们要加载的图片。
在 app.py 中，我们可以使用 st.markdown 函数将 HTML 模板嵌入到 Streamlit 应用中。HTML 模板中的图片路径应该指向 static 文件夹下的图片文件。
Modoer多功能点评系统2.5 精华版 Build 20110710 GBK
Modoer 是一款以本地分享，多功能的点评网站管理系统。采用 PHP+MYSQL 开发设计，开放全部源代码。因具有非凡的访问速度和卓越的负载能力而深受国内外朋友的喜爱，不局限于商铺类点评，真正实现了多类型的点评，可以让您的网站点评任何事与物，同时增加产品模块，也更好的网站产品在网站上展示。Modoer点评系统 2.5 Build 20110710更新列表1.同步 旗舰版系统框架2.增加 限制图片
0 查看详情 
示例代码：
import streamlit as stst.title("Cat")st.markdown("[](https://streamlit.io)")
在这个例子中，static/myimage.png 是图片文件的相对路径。由于我们已经启用了静态资源服务，Streamlit 会自动从 static 文件夹中找到 myimage.png 文件，并将其提供给浏览器。
完整示例
以下是一个完整的示例，展示如何在 Streamlit 应用中使用 HTML 模板加载本地图片：
创建 config.toml 文件：
在用户根目录下的 .streamlit 文件夹中创建 config.toml 文件，并添加以下内容：
[server]enableStaticServing = true
创建 app.py 文件：
import streamlit as stbot_template = ''''''user_template = '''
{{MSG}}'''st.title("Local Image Example")st.markdown(user_template.replace("{{MSG}}", "Hello from User!"), unsafe_allow_html=True)st.markdown(bot_template.replace("{{MSG}}", "Hello from Bot!"), unsafe_allow_html=True)
{{MSG}}
创建 static 文件夹：
在与 app.py 文件相同的目录下创建 static 文件夹，并将 ghog1.jpg 图片文件放入该文件夹中。 你需要将你自己的图片命名为ghog1.jpg或者修改上面的代码中引用的文件名。
运行 Streamlit 应用：
在命令行中运行以下命令：
streamlit run app.py
现在，你应该能够在 Streamlit 应用中看到本地图片了。
注意事项
确保 config.toml 文件位于正确的目录下（用户根目录下的 .streamlit 文件夹）。确保 HTML 模板中的图片路径指向正确的静态资源位置。如果图片无法加载，请检查静态资源服务是否已启用，以及图片文件是否存在于指定的静态资源目录中。使用 unsafe_allow_html=True 参数允许 Streamlit 渲染 HTML 模板。请注意，这可能会带来安全风险，因此请谨慎使用。
总结
通过配置 Streamlit 启用静态资源服务，我们可以轻松地在 HTML 模板中使用本地图片。这使得我们能够更灵活地构建 Streamlit 应用，并集成各种本地资源。希望本文档能够帮助你解决在使用 Streamlit 加载本地图片时遇到的问题。
以上就是使用 Streamlit 在 HTML 模板中加载本地图片的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/851545.html
微信扫一扫 
支付宝扫一扫 
