在Streamlit应用中高效展示本地文件夹中的多个GIF图片-Python教程-PHP中文网

在Streamlit应用中高效展示本地文件夹中的多个GIF图片

聖光之護

发布： 2025-11-07 13:23:00

原创

246人浏览过

本教程详细介绍了如何在streamlit应用中优雅地显示本地文件夹内的多个gif图像。核心方法是利用python的`base64`模块将gif文件编码为数据uri，并通过`st.markdown`结合html ` 在Streamlit应用中高效展示本地文件夹中的多个GIF图片 ` 标签进行渲染。文章强调了使用`glob`模块进行文件路径管理的重要性，并提供了跨平台兼容的完整代码示例，确保图像能够正确加载并显示。

挑战：在Streamlit中显示本地GIF文件

在Streamlit应用中显示本地静态资源，如图片或GIF，开发者常会遇到文件路径管理上的挑战。Streamlit的渲染机制有时不会直接处理本地文件路径，尤其当文件不在应用服务器的静态文件服务路径下时。一种常见且可靠的方法是将图像数据编码为Base64字符串，然后将其作为数据URI直接嵌入到HTML <img> 标签中。这种方式绕过了文件路径的复杂性，使图像数据成为HTML内容的一部分，从而能够被浏览器直接渲染。

然而，在实践中，即便采用了Base64编码，也可能因为文件查找逻辑的缺陷而导致图像无法显示。例如，当使用os.listdir()获取文件名时，如果脚本的当前工作目录与GIF文件所在的目录不一致，那么os.path.isfile()或open()操作将无法找到文件，从而导致显示失败。

解决方案：利用glob模块高效加载GIF

为了克服文件路径管理的挑战并确保跨平台兼容性，我们可以结合使用os.chdir()来改变当前工作目录，并利用glob模块来高效地查找特定类型的文件。glob模块提供了一种灵活的方式来匹配符合特定模式的文件路径名，例如*.gif可以匹配所有以.gif结尾的文件。

百度文心百中

百度大模型语义搜索体验中心

查看详情

以下是实现这一功能的完整Streamlit应用代码示例：

import streamlit as st
import base64
import os, glob
import platform

# 1. 确定工作目录和GIF文件夹路径
# 获取当前脚本文件所在的绝对路径
work_dir = os.path.dirname(os.path.abspath(__file__))
sys = platform.system() # 获取操作系统类型，用于构建跨平台路径

# 根据操作系统构建GIF文件夹的路径
# 假设GIF文件位于脚本同级目录下的 'forecast/fr/' 文件夹中
# 使用 os.path.join 确保路径分隔符的跨平台兼容性
gif_folder_path = os.path.join(work_dir, "forecast", "fr")

# 2. 改变当前工作目录到GIF文件夹
# 这是解决文件查找失败的关键一步。
# glob.glob() 在没有指定完整路径时，会在当前工作目录中查找文件。
if not os.path.exists(gif_folder_path):
    st.error(f"错误：GIF文件夹不存在或路径不正确：{gif_folder_path}")
    st.stop() # 如果文件夹不存在，停止应用运行

os.chdir(gif_folder_path) # 切换到GIF文件所在的目录

# 3. 使用 glob 查找所有GIF文件
# glob.glob("*.gif") 会在当前工作目录中查找所有 .gif 文件
gif_files = glob.glob("*.gif")

if not gif_files:
    st.warning(f"在 '{gif_folder_path}' 文件夹中未找到任何GIF文件。")
else:
    st.markdown("### 本地GIF动画展示", unsafe_allow_html=True)
    # 4. 遍历GIF文件，编码并显示
    for file_name in gif_files:
        try:
            # 以二进制模式打开文件
            with open(file_name, "rb") as file_:
                contents = file_.read()
                # 将文件内容进行base64编码
                data_url = base64.b64encode(contents).decode("utf-8")

            # 使用 st.markdown 嵌入 HTML <img> 标签
            # `unsafe_allow_html=True` 必须设置为 True 才能渲染自定义HTML
            # 添加 style 属性以确保图片在Streamlit界面中良好显示
            st.markdown(
                f'<img src="/uploads/20251107/1762461298690d0672c581a.gif" alt="{file_name}" style="max-width:100%; height:auto; display: block; margin-bottom: 15px;">',
                unsafe_allow_html=True,
            )
            st.write(f"已加载: {file_name}") # 可选：显示文件名
        except Exception as e:
            st.error(f"处理文件 {file_name} 时发生错误: {e}")

登录后复制

代码解析：

路径管理 (os 和 platform):
- os.path.dirname(os.path.abspath(__file__)) 用于获取当前脚本文件所在的目录，这对于构建相对于脚本位置的路径至关重要。
- platform.system() 获取操作系统类型（如"Windows"、"Linux"），结合 os.path.join 来构建正确的跨平台路径，避免因路径分隔符差异导致的问题。
改变工作目录 (os.chdir):
- os.chdir(gif_folder_path) 是解决原问题中文件查找失败的关键。它将Python脚本的当前工作目录切换到存放GIF文件的目录。这样，glob.glob("*.gif") 就能直接在正确的目录下查找文件。
- 在改变目录前，通过 os.path.exists 检查路径是否存在，增强了代码的健壮性。
文件查找 (glob):
- glob.glob("*.gif") 会返回一个列表，其中包含当前工作目录中所有扩展名为 .gif 的文件名。相比于 os.listdir，glob更专注于模式匹配，且在 os.chdir 后使用更为简洁有效。
GIF编码与显示 (base64 和 st.markdown):
- 文件读取: 使用 with open(file_name, "rb") as file_: 以二进制读取模式打开GIF文件。with 语句确保文件在使用后会被正确关闭。
- Base64编码: base64.b64encode(contents).decode("utf-8") 将二进制文件内容编码为Base64字符串。这是将二进制数据嵌入到文本（如HTML）中的标准方法。
- 数据URI: 编码后的字符串被格式化为 /uploads/20251107/1762461298690d0672c581a.gif 形式的数据URI。浏览器可以直接解析这种URI来显示图像，而无需单独的文件请求。
- Streamlit渲染: st.markdown(f'<img src="/uploads/20251107/1762461298690d0672c581a.gif" alt="{file_name}" style="max-width:100%; height:auto; display: block; margin-bottom: 15px;">', unsafe_allow_html=True) 用于将包含数据URI的HTML <img> 标签注入到Streamlit应用中。unsafe_allow_html=True 参数是必需的，因为它允许Streamlit渲染自定义HTML内容。这里还添加了 style 属性来确保GIF图片能够自适应容器宽度并保持良好布局。

关键点与注意事项

文件路径管理： 理解当前工作目录和文件路径的绝对/相对性质至关重要。os.chdir() 是一种改变上下文的有效方法，但另一种选择是始终使用文件的完整绝对路径进行操作，例如 open(os.path.join(gif_folder_path, file_name), "rb")。对于本例，os.chdir() 配合 glob 显得更为简洁。
unsafe_allow_html=True 的安全性： st.markdown 结合 unsafe_allow_html=True 允许在Streamlit应用中注入任意HTML内容。虽然这提供了极大的灵活性，但也带来了潜在的安全风险，特别是当您处理来自不可信源的内容时。在本教程中，我们处理的是本地可信文件，因此风险较低。
性能考量：
- 大量GIF文件： 如果文件夹中包含大量或尺寸巨大的GIF文件，一次性加载并显示所有文件可能会导致Streamlit应用启动缓慢或浏览器卡顿。在这种情况下，可以考虑以下优化策略：
  - 分页加载： 使用Streamlit的 st.slider 或 st.button 实现分页显示。
  - 懒加载： 仅在用户滚动到特定区域时才加载GIF。
  - 压缩GIF： 优化GIF文件大小以减少加载时间。
- 内存占用： Base64编码会使文件大小增加约33%。如果文件非常大，这可能会显著增加内存占用。
跨平台兼容性： 使用 os.path.join 和 platform.system() 是确保代码在不同操作系统上都能正确运行的最佳实践。
错误处理： 在代码中添加 try-except 块来捕获文件读取或编码过程中可能发生的错误，可以提高应用的健壮性，例如文件不存在、权限不足或编码失败等。

总结

在Streamlit应用中展示本地文件夹中的多个GIF文件，需要巧妙地结合文件路径管理、Base64编码和Streamlit的HTML渲染能力。通过使用os.chdir设置正确的上下文，并利用glob模块高效地查找目标文件，我们可以轻松地将GIF内容编码为数据URI，并通过st.markdown(..., unsafe_allow_html=True)将其嵌入到Web界面中。这种方法不仅解决了文件路径的困扰，还提供了一种灵活且跨平台的解决方案，使得Streamlit应用能够丰富地展示各种本地媒体资源。在实际开发中，务必注意性能和安全性方面的考量，以构建高效且用户友好的应用。

以上就是在Streamlit应用中高效展示本地文件夹中的多个GIF图片的详细内容，更多请关注php中文网其它相关文章！