Flask框架中HTML页面无法显示图片问题求助

我在Flask框架的HTML页面中尝试渲染图片，已确认路径指向正确文件，但图片始终无法显示。相关代码如下：

视图代码 #

@inventory_bp.route("/show")
def show_image():
    id = 3
    image = Images.query.get(id)
    upload_folder = app.config['UPLOAD_FOLDER']
    image_path = os.path.join(upload_folder, image.filename)
    return render_template("image-upload.html",image_url=image_path)

HTML代码 #

<div>
  <img src="{{ image_url }}" alt="" />
</div>

配置代码 #

UPLOAD_FOLDER = os.path.join(os.getcwd(), 'flaskbp/uploads')
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER

页面截图 #

问题解决方法 #

你当前传给img标签的是服务器本地文件系统的绝对路径，浏览器没有权限直接访问服务器上的本地文件，必须通过Flask提供的HTTP路由来获取图片资源。

1. 添加上传文件访问路由
   在你的蓝图（inventory_bp）中新增一个路由，用来返回上传的图片文件：

from flask import send_from_directory, url_for

@inventory_bp.route('/uploads/<filename>')
def uploaded_file(filename):
    return send_from_directory(app.config['UPLOAD_FOLDER'], filename)

2. 修改视图函数生成可访问URL
   不再传递本地路径，改用url_for生成浏览器能访问的HTTP路径：

@inventory_bp.route("/show")
def show_image():
    id = 3
    image = Images.query.get(id)
    # 生成对应uploads路由的URL
    image_url = url_for('inventory_bp.uploaded_file', filename=image.filename)
    return render_template("image-upload.html", image_url=image_url)

3. HTML部分保持不变
   原有的img标签无需修改，现在会加载正确的HTTP资源路径。

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