使用 Streamlit 在 HTML 模板中加载本地图片-Python教程-PHP中文网

使用 Streamlit 在 HTML 模板中加载本地图片

聖光之護

发布： 2025-10-15 11:18:30

原创

458人浏览过

使用 streamlit 在 html 模板中加载本地图片

本文档旨在解决在使用 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.增加限制图片

查看详情

示例代码：

import streamlit as st

st.title("Cat")

st.markdown("[![Click Me](static/myimage.png)](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 st

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" >
    </div>    
    <div class="message">{{MSG}}</div>
</div>
'''

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)

登录后复制