首页如何使用Flask send_file函数将图片嵌入前端HTML中

如何使用Flask send_file函数将图片嵌入前端HTML中

时间: 2024-12-13 21:17:46 浏览: 4

在Flask框架中，你可以使用`send_file`函数将图片文件发送到浏览器，并在前端HTML中通过`<img>`标签显示。以下是基本步骤： 1. **设置视图函数**: 在你的Flask应用中创建一个视图函数，例如`app.py`里的一个路由： ```python from flask import Flask, send_file app = Flask(__name__) @app.route('/image/<filename>') def serve_image(filename): image_path = 'static/' + filename # 假设图片存储在static目录下 return send_file(image_path) ``` 这里，`filename`是一个变量，用户请求时会提供具体的图片名字。 2. **处理前端请求**: 在HTML模板中，你可以构建一个链接或者直接使用JavaScript的`fetch`或`a`元素的`href`属性来获取图片： ```html <body> <img src="{{ url_for('serve_image', filename='example.jpg') }}" alt="Example Image"> </body> ``` 或者在前端JS: ```javascript var imgElement = document.createElement("img"); imgElement.src = "{{ url_for('serve_image', filename='example.jpg') }}"; document.body.appendChild(imgElement); ``` 3. **运行服务器**: 启动你的Flask应用，如 `app.run()`，然后在浏览器访问`http://localhost:5000/image/example.jpg`来查看图片。

阅读全文