Flask人脸检测Web应用：检测结果图片无法在网页显示

问题 #

用Python+Flask开发的人脸检测Web应用，上传图片完成检测后，结果图片已保存到指定文件夹，但网页无法正常显示。调整CSS尺寸也没有效果。

问题根源&修复步骤 #

1. 静态文件夹配置错误 #

你在app.py里设置了app.static_folder = "Styles"，但上传的图片存在static/files目录下。Flask默认的静态资源根目录是static，修改后导致无法找到static/files下的文件，直接删除这行配置即可。

2. 图片路径传递错误 #

你给模板传递的是完整的文件系统路径（比如static/files/result_xxx.jpg），但url_for('static', filename=...)需要的是相对于static文件夹的路径（如files/result_xxx.jpg），否则会生成static/static/files/xxx这种无效URL。

3. CSS类名拼写错误 #

HTML中图片的类名是phote-result，但CSS里写的是phot-result（少了一个字母o），导致样式完全不生效。

4. 分类器路径跨平台兼容问题 #

Windows系统用\\分隔路径，换成os.path.join可以兼容Windows和Linux等不同系统。

修正后的完整代码 #

app.py #

# imports
from flask import Flask
from flask import render_template, request, redirect, url_for
from flask_wtf import FlaskForm
from wtforms import FileField, SubmitField
from werkzeug.utils import secure_filename
import os
import cv2


app = Flask(__name__)
# 删除错误的静态文件夹配置，使用默认的static目录
# app.static_folder = "Styles"
app.config['SECRET_KEY'] = 'super'
app.config['UPLOAD_FOLDER'] = 'static/files'

# 表单定义
class UploadFileForm(FlaskForm):
    file = FileField("文件")
    submit = SubmitField("检测人脸")

@app.route("/home", methods=["GET", "POST"])
def homePage():
    form = UploadFileForm()
    
    if form.validate_on_submit():
        file = form.file.data
        if file:
            filename = secure_filename(file.filename)
            filepath = os.path.join(app.config['UPLOAD_FOLDER'], filename)
            # 确保目录存在
            os.makedirs(os.path.dirname(filepath), exist_ok=True)
            
            print("文件路径:", filepath) # 调试用
            file.save(filepath)
            
            # 人脸检测逻辑
            image = cv2.imread(filepath)
            gray_image = cv2.cvtColor(image, cv2.COLOR_BGR2GRAY)
            # 用os.path.join处理分类器路径，兼容跨平台
            face_data = cv2.CascadeClassifier(os.path.join('AI Face Detector App Project', 'haarcascade_frontalface_default.xml'))
            detected_faces = face_data.detectMultiScale(gray_image)

            # 绘制人脸框
            for (x, y, w, h) in detected_faces:
                cv2.rectangle(image, (x, y), (x + w, y + h), (0, 255, 0), 10)
            
            # 保存结果图
            result_filename = 'result_' + filename
            result_path = os.path.join(app.config['UPLOAD_FOLDER'], result_filename)
            cv2.imwrite(result_path, image)

            # 传递相对于static文件夹的路径给模板
            return render_template('results.html', result_filename=os.path.join('files', result_filename))
    
    return render_template("index.html", form=form)

if __name__ == '__main__':
    app.run(debug=True)

results.html #

<!DOCTYPE html>
<html>
<head>
    <title>人脸检测结果</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='result.css') }}">
</head>
<body>
    <div class="result-page">
        <h1>检测到的人脸</h1>
        <!-- 修正类名拼写，使用正确的路径 -->
        <img class="phot-result" src="{{ url_for('static', filename=result_filename) }}" alt="检测结果">
    </div>
</body>
</html>

results.css #

body {
    background-color: rgb(72, 158, 125);
}

.result-page {
    text-align: center;
}

/* 和HTML中的类名保持一致 */
.phot-result {
    max-width: 100%;
    height: auto; /* 自适应高度，避免图片变形 */
}

p {
    padding-top: 600px;    
}

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