Flask静态文件夹图片无法渲染，求技术解决方案

Flask项目中渲染后的HTML无法显示静态文件夹内的图片，请求返回404错误，日志记录：

"GET /static/uploads/IMG_4575_sketch.jpg HTTP/1.1" 404 -

以下是我尝试的代码，恳请提供其他解决思路：

HTML模板代码 #

<div class="row" style="margin-top:10px;margin-bottom:10px;">
    <div class="col text-center">
        <h2>Original Image</h2><img src="{{ url_for('static', filename ='{{ original_name }}') }}"
                style="display: block;margin-left: auto;margin-right: auto;">
    </div>
    <div class="col text-center">
        <h2>Sketch Image</h2><img src="{{ url_for('static', filename = '{{ sketch_img_name }}') }}"
                style="display: block;margin-left: auto;margin-right: auto;">
    </div>
</div>

后端sketch方法代码 #

UPLOAD_FOLDER = '/home/luka/Test/flask_scatch/static'
@app.route('/sketch',methods=['POST'])
def sketch():
    file = request.files['file']
    if file and allowed_file(file.filename):
        filename = secure_filename(file.filename)
        file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
        img = cv2.imread(UPLOAD_FOLDER+'/'+filename)
        sketch_img = make_sketch(img)
        sketch_img_name = filename.split('.')[0]+"_sketch.jpg"
        _ = cv2.imwrite(UPLOAD_FOLDER+'/'+sketch_img_name, sketch_img)
        return render_template('home.html',original_name=filename,sketch_img_name=sketch_img_name)

排查与解决思路 #

• 修复模板语法错误：url_for的参数不需要嵌套{{ }}，直接传入变量名即可，正确写法应为：

  <img src="{{ url_for('static', filename=original_name) }}">
  <img src="{{ url_for('static', filename=sketch_img_name) }}">
  

• 统一文件存储路径：日志显示请求路径包含/uploads/，但后端代码将文件直接存在static根目录。需二选一调整：
  1. 后端修改存储路径到static/uploads：

     UPLOAD_FOLDER = '/home/luka/Test/flask_scatch/static/uploads'
     # 确保uploads文件夹存在，可提前创建：
     import os
     os.makedirs(UPLOAD_FOLDER, exist_ok=True)
     

     同时传递给模板的变量需包含uploads/前缀，比如original_name=f"uploads/{filename}"
  2. 调整请求路径，去掉uploads，确保模板生成的URL与实际文件位置一致
• 确认Flask配置正确性：后端代码中使用了app.config['UPLOAD_FOLDER']，需确保已将定义的UPLOAD_FOLDER注入到app配置：

  app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
  

• 修复路径拼接方式：避免硬编码斜杠，统一用os.path.join拼接路径，防止跨系统路径错误：

  img = cv2.imread(os.path.join(UPLOAD_FOLDER, filename))
  cv2.imwrite(os.path.join(UPLOAD_FOLDER, sketch_img_name), sketch_img)
  

• 检查文件权限：确保Flask进程对static文件夹及生成的图片文件有可读权限，可执行命令调整：

  chmod -R 755 /home/luka/Test/flask_scatch/static
  

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