Flask Web应用如何实现文件夹内所有图片的网页展示

不需要额外装第三方库，Flask原生能力就能实现，分两步改代码就行。

第一步：调整flaskapp.py里的images路由 #

模板本身不能直接读取服务器本地的文件，你需要在路由层先遍历static/photos下的所有jpg文件，把文件名列表传给模板再渲染。
参考代码如下，你原来写的index路由直接保留就行：

from flask import Flask, render_template
import os

app = Flask(__name__)

# 原有index路由不用动
@app.route('/')
def index():
    return render_template('index.html')

@app.route('/images')
def show_images():
    # 拼接photos文件夹的绝对路径，避免相对路径在不同运行环境下报错
    photo_folder = os.path.join(app.static_folder, 'photos')
    valid_photos = []
    for fname in os.listdir(photo_folder):
        # 过滤掉子文件夹，只留.jpg/.JPG格式的文件
        file_full_path = os.path.join(photo_folder, fname)
        if os.path.isfile(file_full_path) and fname.lower().endswith('.jpg'):
            valid_photos.append(fname)
    # 把筛选好的图片名列表传给模板
    return render_template('images.html', photo_list=valid_photos)

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

注意：上面的后缀判断已经兼容了大写.JPG的情况，不用额外加判断逻辑。

第二步：修改images.html模板 #

用Jinja2自带的for循环遍历传入的图片列表，生成对应img标签就行，推荐用url_for生成静态文件地址，比硬写路径兼容性好。
参考模板代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>图片展示</title>
    <style>
        /* 加个基础样式，避免原图太大撑破页面 */
        .img-card {
            max-width: 280px;
            margin: 8px;
            border-radius: 6px;
            box-shadow: 0 1px 3px #ccc;
        }
        .img-container {
            display: flex;
            flex-wrap: wrap;
            padding: 16px;
        }
    </style>
</head>
<body>
    <h2>所有图片</h2>
    <div class="img-container">
        {% for photo in photo_list %}
        <img 
            src="{{ url_for('static', filename='photos/' + photo) }}" 
            alt="{{ photo }}"
            class="img-card"
        >
        {% endfor %}
    </div>
</body>
</html>

新手容易踩的坑 #

• 文件夹结构别放错：flaskapp.py同级必须有templates文件夹（存两个html文件）、static文件夹，photos子文件夹必须放在static下面，放错位置会直接404找不到文件。
• 如果个别图片加载失败，先检查文件名有没有中文、特殊符号或者空格，初期测试尽量用纯英文数字命名，避免路径转义问题。
• 几百张图片一次性加载会稍慢，等基础功能跑通之后，你再按需加图片懒加载、分页功能优化体验就行。

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