使用Streamlit+HTML模板时无法加载本地img文件夹图片的问题

不需要额外安装库，问题出在Streamlit的静态资源处理机制——它默认不会暴露本地任意文件夹，直接用相对路径无法被浏览器识别，而外部链接是公网可访问资源，所以能正常加载。以下是两种可行解决方案：

方案一：启用Streamlit静态文件服务 #

1. 创建static文件夹，将你的img文件夹放入其中，目录结构如下：

   your_app/
   ├── static/
   │   └── img/
   │       └── ghog1.jpg
   └── your_app.py
   

2. 启动Streamlit时添加参数开启静态服务：

   streamlit run your_app.py --server.enableStaticServing true
   

3. 修改HTML模板中的图片路径：

   user_template = '''
   <div class="chat-message user">
       <div class="avatar">
           <img src="/static/img/ghog1.jpg" >
       </div>    
       <div class="message">{{MSG}}</div>
   </div>
   '''
   

方案二：将图片转为Base64编码嵌入HTML #

这种方法无需额外配置，直接把图片编码成Base64字符串嵌入HTML，避免路径问题：

1. 编写Base64转换函数：

   import base64
   
   def get_base64_image(image_path):
       with open(image_path, "rb") as img_file:
           return base64.b64encode(img_file.read()).decode()
   

2. 生成带Base64图片的模板：

   # 转换本地图片为Base64
   user_avatar_base64 = get_base64_image("img/ghog1.jpg")
   # 生成模板（用四个大括号保留{{MSG}}占位符）
   user_template = f'''
   <div class="chat-message user">
       <div class="avatar">
           <img src="data:image/jpeg;base64,{user_avatar_base64}" >
       </div>    
       <div class="message">{{{{MSG}}}}</div>
   </div>
   '''
   

内容的提问来源于stack exchange，提问作者imtryin2code