Flask返回页面图片显示异常：本地直接预览HTML正常

嘿，这个问题我之前也碰到过！原因很简单——你没遵循Flask对静态资源的目录规范，咱们一步步来搞定它：

问题根源 #

本地直接打开HTML时，浏览器是从templates目录（也就是HTML文件所在的文件夹）里找图片，所以能正常显示；但通过Flask服务访问时，Flask默认只会从static目录加载静态资源（图片、CSS、JS这类文件），你把图片放在templates里，Flask自然找不到它。

解决步骤 #

1. 调整目录结构 #

新建一个static文件夹，把你的图片移进去，最终结构应该是这样：

/ 
-server.py 
--templates/ 
---org_dashboard.html 
--static/ 
---img_avatar.png 

2. 修改HTML里的图片路径 #

有两种靠谱的方式：

• 方式一：直接使用绝对路径
  把图片的src改成指向static目录的绝对路径：

  <div class="card-columns"> 
    <div class="card"> 
      <img src="/static/img_avatar.png" alt="Avatar" style="width:100%"> 
      <div class="container"> 
        <h4><b>John Doe</b></h4> 
        <p>Architect & Engineer</p> 
      </div> 
    </div> 
  </div>
  

• 方式二：使用Flask的url_for函数（更推荐）
  这种方式在部署或者修改静态资源路径时更灵活，不需要手动改路径：

  <div class="card-columns"> 
    <div class="card"> 
      <img src="{{ url_for('static', filename='img_avatar.png') }}" alt="Avatar" style="width:100%"> 
      <div class="container"> 
        <h4><b>John Doe</b></h4> 
        <p>Architect & Engineer</p> 
      </div> 
    </div> 
  </div>
  

3. 保持Flask代码不变 #

你的Flask路由代码完全没问题，不需要修改：

@app.route('/org_dashboard', methods=['GET', 'POST'])
def org_dashboard():    
    return render_template('org_dashboard.html')

做完这些，重启Flask服务再访问页面，图片就能正常显示啦！

内容的提问来源于stack exchange，提问作者Muhammad Saad Jumani