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

本文档旨在解决在使用 Streamlit 框架开发 Python 应用时，如何通过 HTML 模板加载本地图片的问题。我们将介绍如何配置 Streamlit 以允许静态资源服务，并提供示例代码展示如何在 HTML 模板中使用本地图片。通过本文，你将能够轻松地在 Streamlit 应用中集成本地图片资源。

在使用 Streamlit 构建 Web 应用时，经常需要在 HTML 模板中展示图片。如果图片资源位于本地文件系统中，直接使用相对路径可能无法正确加载。这是因为 Streamlit 默认情况下不提供静态资源服务。为了解决这个问题，我们需要配置 Streamlit 以允许静态资源服务，并确保 HTML 模板中的图片路径指向正确的静态资源位置。

配置 Streamlit 允许静态资源服务

Streamlit 提供了一个配置选项，允许我们启用静态资源服务。通过修改 Streamlit 的配置文件 config.toml，我们可以指定一个目录作为静态资源目录，Streamlit 将会从该目录中提供静态文件，例如图片、CSS 文件和 JavaScript 文件。

立即学习“前端免费学习笔记（深入）”；

1. 找到 config.toml 文件： 该文件通常位于用户根目录下 .streamlit 文件夹中。如果没有该文件，可以手动创建。

2. 修改 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 文件夹下的图片文件。

JS超酷图片翻动展示效果

JS超酷图片翻动展示效果，根据鼠标进出图片的方向来控制图片进出的方式，效果超炫，兼容主流浏览器。 使用方法： 1、head区域引用文件 lrtk.css，animation.css 2、在文件中加入!-- 代码 开始 --!-- 代码 结束 --区域代码 3、js代码需要在html代码之后载入public.js，main.js 4、如需修改图片尺寸，直接在lrtk.css第10行修改即可

下载

示例代码：

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 模板加载本地图片：

1. 创建 config.toml 文件：

在用户根目录下的 .streamlit 文件夹中创建 config.toml 文件，并添加以下内容：

[server]
enableStaticServing = true

2. 创建 app.py 文件：

import streamlit as st

bot_template = '''

    

        @@##@@
    
    
{{MSG}}

'''

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)

3. 创建 static 文件夹：

在与 app.py 文件相同的目录下创建 static 文件夹，并将 ghog1.jpg 图片文件放入该文件夹中。 你需要将你自己的图片命名为ghog1.jpg或者修改上面的代码中引用的文件名。

4. 运行 Streamlit 应用：

在命令行中运行以下命令：

streamlit run app.py

现在，你应该能够在 Streamlit 应用中看到本地图片了。

注意事项

• 确保 config.toml 文件位于正确的目录下（用户根目录下的 .streamlit 文件夹）。
• 确保 HTML 模板中的图片路径指向正确的静态资源位置。
• 如果图片无法加载，请检查静态资源服务是否已启用，以及图片文件是否存在于指定的静态资源目录中。
• 使用 unsafe_allow_html=True 参数允许 Streamlit 渲染 HTML 模板。请注意，这可能会带来安全风险，因此请谨慎使用。

总结

通过配置 Streamlit 启用静态资源服务，我们可以轻松地在 HTML 模板中使用本地图片。这使得我们能够更灵活地构建 Streamlit 应用，并集成各种本地资源。希望本文档能够帮助你解决在使用 Streamlit 加载本地图片时遇到的问题。