后端存储图片路径时前端如何加载并显示图片（Flask+Ionic栈）

你当前返回404的核心原因是Flask默认没有将服务器本地磁盘路径映射为可公开访问的HTTP路由，同时你的前端资源路径写法也存在错误。

第一步：配置Flask后端路由 #

你需要新增一个专门用于返回图片资源的接口，示例代码如下：

from flask import Flask, send_from_directory
from flask_cors import CORS # 解决前端跨域问题，无跨域需求可省略
import os

app = Flask(__name__)
CORS(app) # 开启跨域支持，无跨域需求可省略

# 配置服务器本地图片存储的根路径
IMAGE_ROOT = r'C:\X\Y\images'

# 新增图片访问路由
@app.route('/images/<filename>')
def serve_image(filename):
    return send_from_directory(IMAGE_ROOT, filename)

if __name__ == '__main__':
    # 0.0.0.0代表允许所有IP访问，端口保持你原来的5000即可
    app.run(host='0.0.0.0', port=5000)

如果之前没有安装跨域依赖，执行pip install flask-cors安装即可。

第二步：修改前端Ionic图片路径 #

你原来的路径有两个错误：

1. 没有加http://前缀，浏览器会识别为相对路径而非独立的资源地址
2. 0.0.0.0是服务端的监听地址，前端访问需要替换为Windows服务器的实际公网IP/局域网IP（比如服务器IP是192.168.1.10就写192.168.1.10）

修改后的src写法：

<img src="http://<你的服务器实际IP>:5000/images/{{ 从API获取的文件名 }}" alt="图片">

如果是生产环境部署，更推荐用Nginx处理静态资源请求，性能远高于Flask直接响应：

• 只需要在Nginx配置中新增如下规则即可，前端路径不需要修改

location /images/ {
    root C:/X/Y/;
}

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