Flask加载本地图片处理后无磁盘存储HTML显示失败问题

我看了你的代码，图片无法显示主要是几个细节没处理对，咱们一步步来修正：

问题分析 #

• 路由拼写错误：img_prcoess 里的字母写错了（应该是 img_process），HTML里的form action也会跟着错，导致请求找不到对应的路由
• 灰度图编码方式错误：你直接对OpenCV的灰度numpy数组做base64编码，这不对——得先把灰度图编码成JPEG格式的字节流，再做base64编码
• Base64结果未转字符串：b64encode 返回的是bytes类型，需要转成utf-8字符串才能在HTML的src里正常使用
• 路径拼接不规范：用 / 拼接路径在Windows系统会出问题，建议用os.path.join统一处理

修正后的完整代码 #

app.py #

from flask import Flask, render_template
from base64 import b64encode
import cv2 as cv
import os

app = Flask(__name__)
APP_ROOT = os.path.dirname(os.path.abspath(__file__))
# 用os.path.join拼接路径，适配不同操作系统
target = os.path.join(APP_ROOT, 'static')

@app.route("/")
def index():
    # 初始设为空字符串，避免页面加载时图片报错
    uri1 = ''
    return render_template("output.html", uri1=uri1)

# 修正路由名称拼写错误
@app.route("/img_process", methods=['POST'])
def img_process():
    # 读取图片，用os.path.join拼接路径
    img_path = os.path.join(target, 'bradley_cooper.jpg')
    src_img = cv.imread(img_path)
    if src_img is None:
        # 处理图片读取失败的情况
        return render_template("output.html", uri1='', error="图片读取失败，请检查路径")
    
    # 转换为灰度图
    img1_gray = cv.cvtColor(src_img, cv.COLOR_BGR2GRAY)
    
    # 关键：先把灰度图编码成JPEG字节流
    _, img_encoded = cv.imencode('.jpg', img1_gray)
    # 对字节流做base64编码，再转成字符串
    img_base64 = b64encode(img_encoded).decode('utf-8')
    # 构造data URI
    uri1 = f"data:image/jpeg;base64,{img_base64}"
    
    return render_template("output.html", uri1=uri1)

if __name__ == "__main__":
    app.run(port=4444, debug=True)

output.html #

<!DOCTYPE html>
<html>
<head>
    <title>处理后图片展示</title>
</head>
<body>
    <!-- 修正form的action路由名称 -->
    <form id="form1" action="{{ url_for('img_process') }}" method="POST">
        <input type="submit" value="Show Image" id="button1" style="width:100px">
    </form>
    <!-- 加alt属性，图片加载失败时显示提示 -->
    <img style="height: 300px" src="{{ uri1 }}" alt="处理后的灰度图">
    <!-- 可选：显示错误信息 -->
    {% if error %}
        <p style="color:red">{{ error }}</p>
    {% endif %}
</body>
</html>

关键修改点解释 #

1. 路由名称修正：把img_prcoess改成img_process，确保HTML的form action和后端路由对应，不然请求会返回404
2. 图片编码流程：
   • 用cv.imencode('.jpg', img1_gray)把灰度图转换成JPEG格式的字节数组，第一个返回值是是否成功的标志，第二个是字节数据
   • 对编码后的字节做base64编码，然后用.decode('utf-8')把bytes转成字符串，这样才能正确嵌入到HTML的src属性里
3. 路径处理：用os.path.join拼接图片路径，避免跨系统的路径分隔符问题
4. 错误处理：增加了图片读取失败的判断，返回错误提示，方便排查问题

这样修改后，点击"Show Image"按钮，后端处理完图片后，就能把灰度图的base64数据传给HTML，正常显示图片了。

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