場(chǎng)景需求：需要在Flask服務(wù)器的本地找一張圖片返回給前端展示出來(lái)。
問(wèn)題疑點(diǎn)：通常前端的<img>標(biāo)簽只會(huì)接受url的形式來(lái)展示圖片，沒(méi)試過(guò)在返回服務(wù)器本地的一張圖片給前端。
因此寫(xiě)個(gè)記錄一下這個(gè)看起來(lái)有點(diǎn)奇葩的場(chǎng)景（通常個(gè)人博客，個(gè)人網(wǎng)站沒(méi)有錢(qián)用第三方的服務(wù)都會(huì)采用存儲(chǔ)在服務(wù)器本地的方法啦。）
項(xiàng)目目錄：
dyy_project
|
|----static (新建flask項(xiàng)目時(shí)自動(dòng)建的，沒(méi)有任何文件)
|----templates
|-----index.html (前端頁(yè)面)
|----dyy_project.py (flask項(xiàng)目啟動(dòng)文件)
文件內(nèi)容：dyy_project.py
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
#!/usr/bin/env python# coding=utf-8 from flask import Flaskfrom flask import render_template app = Flask(__name__) """這是一個(gè)展示Flask如何讀取服務(wù)器本地圖片, 并返回圖片流給前端顯示的例子""" def return_img_stream(img_local_path): """ 工具函數(shù): 獲取本地圖片流 :param img_local_path:文件單張圖片的本地絕對(duì)路徑 :return: 圖片流 """ import base64 img_stream = '' with open(img_local_path, 'r') as img_f: img_stream = img_f.read() img_stream = base64.b64encode(img_stream) return img_stream @app.route('/')def hello_world(): img_path = '/home/hogan/Googlelogo.png' img_stream = return_img_stream(img_path) return render_template('index.html', img_stream=img_stream) if __name__ == '__main__': app.run(debug=True, port=8080) |
文件內(nèi)容：index.html
|
1
2
3
4
5
6
7
8
9
10
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Flask Show Image</title></head><body> <img style="width:180px" src="data:;base64,{{ img_stream }}"></body></html> |
注意：在img標(biāo)簽中的src一定要按照 data:;base64,{{img_stream}} 的形式添加，否則顯示不出圖片。
然后啟動(dòng)你的Flask程序，訪(fǎng)問(wèn)http://127.0.0.1:8080 你就可以看到你的圖片了。
以上這篇python 實(shí)現(xiàn)Flask中返回圖片流給前端展示就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持服務(wù)器之家。
原文鏈接：https://blog.csdn.net/dongyouyuan/article/details/72282906
