基于Flask搭建图片gallery，如何自动读取文件夹内图片批量展示？

1. 后端Flask代码调整 #

你只需要在Flask的路由逻辑里读取目标文件夹的所有图片文件名，把文件名列表传给前端模板即可，无需手动维护图片路径。
示例代码如下：

from flask import Flask, render_template
import os

app = Flask(__name__)

@app.route('/gallery')
def gallery():
    # 定义图片存储文件夹的本地路径
    gallery_dir = os.path.join(app.static_folder, 'Gallery')
    # 筛选合法的图片格式，可按需添加其他后缀
    allowed_exts = {'jpg', 'jpeg', 'png', 'gif', 'webp'}
    image_list = [
        f for f in os.listdir(gallery_dir)
        if os.path.isfile(os.path.join(gallery_dir, f)) and f.split('.')[-1].lower() in allowed_exts
    ]
    # 将图片文件名列表传递给前端模板
    return render_template('gallery.html', image_list=image_list)

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

2. HTML模板调整 #

用Jinja2的循环语法动态生成图片标签，替换原来手动写的所有固定图片代码即可：

<!-- 替换你原手动编写的所有图片a标签部分 -->
{% for image_name in image_list %}
<a class="IMGLIST" href="{{ url_for('static', filename='Gallery/' + image_name) }}">
    <img src="{{ url_for('static', filename='Gallery/' + image_name) }}" alt="{{ image_name }}">
</a>
{% endfor %}

这里用url_for生成路径比手写相对路径更稳定，不会因为路由层级变化导致资源加载失败。

额外优化建议 #

• 如果需要固定图片展示顺序，可以给image_list添加排序逻辑，比如image_list.sort()即可实现按文件名升序排列
• 后续新增图片只需要上传到static/Gallery目录即可，不需要修改任何代码，页面会自动加载新图片
• 可以给img标签添加固定宽高的样式，避免页面加载时出现布局跳动

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