Python Flask如何加载传入HTML的非本地存储图片URL

新手优先选：直接前端引用远程URL（无需额外后端处理） #

img标签本身支持加载任意公网可正常访问的图片地址，不需要把图片存到你的Flask服务本地，直接按以下步骤实现即可：

• 第一步：编写Flask入口文件app.py

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    # 此处传入你的远程图片URL，也可以直接硬写在HTML模板里
    remote_img_url = "https://something.jpg"
    return render_template('index.html', img_url=remote_img_url)

if __name__ == '__main__':
    app.run(debug=True)

• 第二步：在项目根目录新建templates文件夹，新建HTML模板templates/index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>远程图片加载测试</title>
</head>
<body>
    <!-- 直接把远程URL赋值给img的src属性即可 -->
    <img src="{{ img_url }}" alt="远程图片">
</body>
</html>

特殊场景用：Flask代理加载图片 #

如果远程图片服务配置了防盗链，前端直接引用会加载失败，或者你需要先对图片做裁剪、加水印等处理再返回给前端，可以用代理方案：

• 先安装依赖包：pip install requests pillow
• 修改app.py代码如下：

from flask import Flask, render_template, make_response
import requests
from io import BytesIO
# 如需处理图片可以引入Pillow库
# from PIL import Image

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

# 代理获取远程图片的路由
@app.route('/get-image')
def get_image():
    remote_img_url = "https://something.jpg"
    # 后端请求远程图片
    resp = requests.get(remote_img_url)
    
    # 如果需要处理图片，可在这里添加逻辑，示例：
    # img = Image.open(BytesIO(resp.content))
    # 此处添加裁剪、改分辨率、加水印等处理逻辑
    # 处理完成后将图片写入新的BytesIO对象返回即可
    
    # 构造图片响应返回给前端
    response = make_response(resp.content)
    response.headers.set('Content-Type', 'image/jpeg')
    return response

if __name__ == '__main__':
    app.run(debug=True)

• 修改HTML模板中的img标签：

<img src="/get-image" alt="代理加载的远程图片">

注意：如果远程图片格式不是jpg，需要把返回的Content-Type改成对应格式，比如png对应image/png。

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