Flask图像分割应用分割后图片无法在前端页面正常显示问题求助

你遇到的问题和HTML无关，核心原因有两个：

1. 你传给模板的address是Windows本地磁盘的绝对路径，浏览器的安全策略禁止访问HTTP服务返回的本地磁盘路径，只能访问服务端暴露的HTTP资源路径
2. Flask默认只有static目录下的资源会被对外开放访问，你存储转换后图片的transformed目录属于模板目录，没有对外暴露访问路由，浏览器无法读取该路径下的文件

按以下步骤修改即可：

步骤1：配置静态资源路由 #

在Flask应用初始化时，将存储转换后图片的目录设置为静态资源目录，对外开放访问：

## 替换你原有的Flask初始化代码
app = Flask(__name__,
            # 静态资源的本地磁盘路径，就是你存转换后图片的目录
            static_folder=r'C:\Users\Asus\Documents\deep learning\deep_learn\NOTEBOOKS\app\templates\transformed',
            # 静态资源的访问URL前缀，可自定义
            static_url_path='/output_imgs')

步骤2：修改视图函数，传入正确的HTTP访问路径 #

不要将本地磁盘路径传给模板，要转换成可通过Flask服务访问的HTTP路径：

@app.route('/transformed', methods=['POST'])
def transform():
    red_image, full_disk_path = image_return()
    # 从完整磁盘路径中提取文件名
    img_filename = os.path.basename(full_disk_path)
    # 拼接成可访问的HTTP路径
    access_url = f'/output_imgs/{img_filename}'
    return render_template('imagetrans.html', address=access_url)

步骤3：修正HTML模板的属性写法 #

给src属性加上双引号，避免路径含特殊字符时解析错误：

<body>
  <center>
    <img src="{{address}}" alt="display.error" />
  </center>
</body>

修改完成后重启服务，上传图片后如果仍无法显示，可打开浏览器开发者工具的「网络」面板，查看图片请求的返回状态：

• 如果返回404：检查access_url的拼接是否和你配置的static_url_path一致，确认文件名是否正确
• 如果返回403：检查存储图片的目录权限，确保Flask进程有读取权限

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