Flask项目如何访问并展示外部uploads文件夹中的图片？

你的核心问题是把服务器本地的绝对路径直接传给了前端，浏览器会将这个路径解析为客户端本地的文件路径，自然无法找到服务器上的图片。Flask默认只对外暴露static文件夹下的内容，必须通过路由映射来让前端访问uploads里的文件。

方法一：创建专门的文件访问路由（推荐） #

在views.py中新增路由，负责返回uploads目录下的文件，同时加入安全校验：

from flask import send_from_directory, abort
import os

app.config['UPLOAD_FOLDER'] = os.path.abspath('uploads')

# 新增文件访问路由
@app.route('/uploads/<file_type>/<filename>')
def uploaded_file(file_type, filename):
    # 安全校验：仅允许访问Image和PDF目录
    if file_type not in ['Image', 'PDF']:
        abort(404)
    # 拼接文件所在的具体目录
    file_dir = os.path.join(app.config['UPLOAD_FOLDER'], file_type)
    # 返回对应文件
    return send_from_directory(file_dir, filename)

@app.route('/')
def home():
    user = get_current_user()
    files = Files.query.all()
    return render_template('home.html', files=files, user=user)

修改home.html中的img标签，用url_for生成正确的访问URL：

{% for file in files %} 
  <a href="{{ url_for('file_view', file_id=file.id) }}">
   <img src="{{ url_for('uploaded_file', file_type=file.file_type, filename=file.name) }}" style="width: 200px" alt="{{ file.bio }}">            
  </a> 
{% endfor %}

方法二：配置Flask额外静态目录（适合无权限校验场景） #

如果不需要权限控制，可以直接将uploads文件夹配置为Flask的额外静态目录，在run.py中修改：

from flask import Flask, send_from_directory
import os

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

# 将uploads设置为额外静态文件夹，映射到/uploads路径
app.add_url_rule('/uploads/<path:filename>', endpoint='uploaded_file',
                 view_func=lambda filename: send_from_directory(app.config['UPLOAD_FOLDER'], filename))

前端同样用url_for生成路径：

{% for file in files %} 
  <a href="{{ url_for('file_view', file_id=file.id) }}">
   <img src="{{ url_for('uploaded_file', filename=file.file_type+'/'+file.name) }}" style="width: 200px" alt="{{ file.bio }}">            
  </a> 
{% endfor %}

关键安全提醒 #

• 必须做目录校验：限制file_type只能是Image或PDF，防止攻击者通过路径遍历访问服务器上的敏感文件。
• 若文件需要权限控制（仅登录用户可见），可在文件路由中添加登录校验逻辑。

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