python Flask中返回圖片流給前端展示

image

DHogan 2017-05-16 14:50:48

image

20440

image

分類專欄：學(xué)習(xí)前端記錄 python

版權(quán)

場景需求：需要在Flask服務(wù)器的本地找一張圖片返回給前端展示出來肴掷。

問題疑點(diǎn)：通常前端的<img>標(biāo)簽只會接受url的形式來展示圖片樟插，沒試過在返回服務(wù)器本地的一張圖片給前端。

因此寫個(gè)記錄一下這個(gè)看起來有點(diǎn)奇葩的場景（通常個(gè)人博客正歼，個(gè)人網(wǎng)站沒有錢用第三方的服務(wù)都會采用存儲在服務(wù)器本地的方法啦专执。）

項(xiàng)目目錄：

dyy_project

|----static (新建flask項(xiàng)目時(shí)自動建的途事，沒有任何文件)

|----templates

|-----index.html (前端頁面)

|----dyy_project.py (flask項(xiàng)目啟動文件)

文件內(nèi)容：dyy_project.py

#!/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:文件單張圖片的本地絕對路徑    :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

<!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}} 的形式添加布卡，否則顯示不出圖片血崭。

然后啟動你的Flask程序卧惜，訪問http://127.0.0.1:8080 你就可以看到你的圖片了。

</article>

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者