Python/Flask本地图片上传显示异常求助：仅显示通用图标

问题描述 #

作为Python/Flask和HTML新手，我正在完成一个本地练习：实现浏览器端选择本地图片并在网页显示的功能。目前仅做本地功能，后续计划迁移至云端，但运行程序后无法显示完整图片，仅出现通用“上传图片”占位图标。

现有代码与目录结构 #

FlyFinderWeb.py #

from flask import Flask, render_template, request, redirect, url_for, send_from_directory
import os

app = Flask(__name__)
UPLOAD_FOLDER = 'uploads'
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER

@app.route('/', methods=['GET', 'POST'])
def upload_photo():
    if request.method == 'POST':
        if 'photo' not in request.files:
            return redirect(request.url)
        
        photo = request.files['photo']
        
        if photo.filename == '':
            return redirect(request.url)
        
        if photo:
            filename = os.path.join(app.config['UPLOAD_FOLDER'], photo.filename)
            photo.save(filename)
            return redirect(url_for('display_photo', filename=photo.filename))
    
    return render_template('upload.html')

@app.route('/display/<filename>')
def display_photo(filename):
    print(os.path.join(app.config['UPLOAD_FOLDER'], filename))  
    return render_template('display.html', filename=filename)

app.run(debug=True, use_reloader=True) #automatically restart server if changes are detected  

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

upload.html #

<!doctype html>
<html>
<head>
    <title>Upload and Display Photo</title>
</head>
<body>
    <h1>Upload a Photo Please 3.0</h1>
    <form method="POST" enctype="multipart/form-data">
        <input type="file" name="photo" accept=".jpg, .jpeg, .png" title="Select File">
        <input type="submit" value="Upload">
    </form>
</body>
</html>

display.html #

<!doctype html>
<html>
<head>
    <title>Display Photo</title>
    <style>
        .image-container {
            text-align: center;
            margin-bottom:;
        }
        .image-container img {
            max-width: 100%;
            max-height: 400px;
        }
    </style>
</head>
<body>
    <h1>Uploaded Photo</h1>

    <div class="image-container">
      <img src="{{ url_for('display_photo', filename=filename) }}" alt="Uploaded Photo">

    </div>
    
    <p>Would you like to repeat another?</p>
    <a href="{{ url_for('upload_photo') }}">Upload Another</a>
</body>
</html>

目录结构 #

问题原因 #

当前代码核心问题：display_photo路由负责渲染展示图片的HTML页面，但display.html中的<img>标签却将src指向该路由。浏览器请求该URL时得到的是HTML页面而非图片文件，因此无法加载图片，只能显示占位图标。

额外小问题：

1. 未确保uploads文件夹存在，首次运行上传图片会报错
2. display.html中margin-bottom:;存在CSS语法错误

修复步骤 #

1. 修改Flask后端代码（FlyFinderWeb.py） #

• 添加自动创建uploads文件夹的逻辑
• 新增专门返回图片文件的路由serve_uploaded_file

修改后代码：

from flask import Flask, render_template, request, redirect, url_for, send_from_directory
import os

app = Flask(__name__)
UPLOAD_FOLDER = 'uploads'
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER

# 自动创建uploads文件夹，不存在则创建
os.makedirs(UPLOAD_FOLDER, exist_ok=True)

@app.route('/', methods=['GET', 'POST'])
def upload_photo():
    if request.method == 'POST':
        if 'photo' not in request.files:
            return redirect(request.url)
        
        photo = request.files['photo']
        
        if photo.filename == '':
            return redirect(request.url)
        
        if photo:
            filename = os.path.join(app.config['UPLOAD_FOLDER'], photo.filename)
            photo.save(filename)
            return redirect(url_for('display_photo', filename=photo.filename))
    
    return render_template('upload.html')

@app.route('/display/<filename>')
def display_photo(filename):
    print(os.path.join(app.config['UPLOAD_FOLDER'], filename))  
    return render_template('display.html', filename=filename)

# 新增路由：返回uploads文件夹中的图片文件
@app.route('/uploads/<filename>')
def serve_uploaded_file(filename):
    return send_from_directory(app.config['UPLOAD_FOLDER'], filename)

app.run(debug=True, use_reloader=True)

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

2. 修改前端展示页面（display.html） #

• 将<img>标签的src改为指向新增的serve_uploaded_file路由
• 修复CSS语法错误，给margin-bottom设置有效值

修改后代码：

<!doctype html>
<html>
<head>
    <title>Display Photo</title>
    <style>
        .image-container {
            text-align: center;
            margin-bottom: 20px;
        }
        .image-container img {
            max-width: 100%;
            max-height: 400px;
        }
    </style>
</head>
<body>
    <h1>Uploaded Photo</h1>

    <div class="image-container">
      <img src="{{ url_for('serve_uploaded_file', filename=filename) }}" alt="Uploaded Photo">
    </div>
    
    <p>Would you like to repeat another?</p>
    <a href="{{ url_for('upload_photo') }}">Upload Another</a>
</body>
</html>

验证修复 #

完成修改后重启Flask服务，重新上传图片即可正常显示。

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