万法同源
一直觉得可能自己不太适合搞技术，更适合在天桥底下支个摊子说书。技术的东西从来没人关注，扯东扯西的文章莫名的火。之前的一篇文章MarkDown添加图片的三种方式不管是在技术为主的CSDN还是娱乐为主的简书，都莫名的火爆，看图：
网络异常，图片无法展示
|
markdown添加图片
其实文章没什么含量，就是介绍了下markdown添加图片的方式，唯一新奇的可能就是使用了base64的图片二进制转化。
![avatar]\(data:image/png;base64,iVBORw0......)
- 使用python将图片转化为base64字符串
import base64 f=open('723.png','rb') #二进制方式打开图文件 ls_f=base64.b64encode(f.read()) #读取文件内容，转换为base64编码 f.close() print(ls_f)
- base64字符串转化为图片
import base64 bs='iVBORw0KGgoAAAANSUhEUg....' # 太长了省略 imgdata=base64.b64decode(bs) file=open('2.jpg','wb') file.write(imgdata) file.close()
可我干嘛今天要说这事情呢？看标题喽....
通过request.get(url).content获取的二进制字符串，直接存储至SQLite数据库的BLOB字段中。如果我们需要显示图片，直接通过open函数的写入数据即可生成原始的图片。但是，如果我不想写入图片，而希望直接展示在web界面上呢？也可以通过markdown添加图片的方式，使用base64的编码来实现！
Flask展示图片例子
我们先不通过读取数据库，而是直接获取requests.get(url).content的方式测试Flask的图片展示。
HTML代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <img src="data:;base64,{{ img }}"> </body> </html>
Flask后台代码：
# -*- coding: utf-8 -*- # @Author : 王翔 # @JianShu : 清风Python # @Date : 2019/7/24 0:25 # @Software : PyCharm # @version ：Python 3.7.3 # @File : image_show.py from flask import Flask, render_template import base64 import requests app = Flask(__name__) @app.route("/show") def show_image(): r = requests.get('http://img.chebiaow.com/thumb/cb/allimg/1303/1-1303061Z600520,c_fill,h_138,w_160.jpg') image = base64.b64encode(r.content).decode('ascii') return render_template('index.html', img=image) if __name__ == '__main__': app.run()
网络异常，图片无法展示
|
base64展示图片
图片展示OK，使用这种方式，我们就没必要将图片文件先从数据库中读取生成后，再通过url_for('static',filename='x.png')的方式进行显示了。
完善车标测试app
我们将获取车标网站的141中汽车品牌存储到了SQLite数据库中，结果如下：
网络异常，图片无法展示
|
车标数据库
那么今天，我们就把这些数据库信息配合Flask完成一个简单的车标学习简单网站吧，下来看看实现效果：
网络异常，图片无法展示
|
车标学习.gif
后台Flask代码：
# -*- coding: utf-8 -*- # @Author : 王翔 # @JianShu : 清风Python # @Date : 2019/7/25 1:37 # @Software : PyCharm # @version ：Python 3.7.3 # @File : app.py from flask import Flask, render_template, g import sqlite3 import random import base64 app = Flask(__name__) DATABASE = 'static/db/car.db' app.secret_key = 'Breeze Python' def connect_db(): return sqlite3.connect(DATABASE) @app.before_request def before_request(): g.db = connect_db() @app.teardown_request def teardown_request(exception): if hasattr(g, 'db'): g.db.close() def query_db(query, args=()): cur = g.db.execute(query, args) rv = [dict((cur.description[idx][0], value) for idx, value in enumerate(row)) for row in cur.fetchall()] if not query.startswith('select'): g.db.commit() return rv[0] if rv else None @app.route('/car') @app.route('/') def index(): id = random.randint(1, 141) car_info = query_db('select name,image,founded,models,website from car_logo where id={}'.format(id)) car_info['image'] = base64.b64encode(car_info['image']).decode('ascii') print(car_info) return render_template('index.html', car=car_info) if __name__ == '__main__': app.run(host='0.0.0.0', port=7000)
前台HTML代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1 ,user-scalable=no"> <title>清风python</title> <link rel="icon" href="{{ url_for('static',filename='favicon.ico') }}"> <link rel="stylesheet" href="{{ url_for('static',filename='css/bootstrap.min.css') }}"> <link rel="stylesheet" href="{{ url_for('static',filename='css/main.css') }}"> <script src="{{ url_for('static',filename='js/jquery.min.js') }}"></script> </head> <body> <div class="container container-small"> <div class="content"> <div class="header"> 车标学习 </div> <div class="block-info"> <div class="form-group" align="center"> <p><img class="img-rounded" src="data:;base64,{{ car.image }}"></p> </div> <div class="form-group car-info"> <table class="table table-hover table-bordered table_show table-condensed"> <tbody> <tr> <th>品牌</th> <td id="idiom_name"> {{ car.Name }}</td> </tr> <tr> <th>始于</th> <td id="idiom_meaning">{{ car.founded }}</td> </tr> <tr> <th>车型</th> <td id="idiom_example"> {{ car.models }}</td> </tr> <tr> <th>官网</th> <td id="idiom_example"> {{ car.website }}</td> </tr> </tbody> </table> </div> <div class="form-group "> <a class="form-control btn-primary" href="{{ url_for('index') }}">换一个</a> </div> </div> </div> <div class="footer"> ©2019-欢迎关注我的公众号：<a href="https://www.jianshu.com/u/d23fd5012bed">清风Python</a> </div> </div> </body> </html>
The End
OK,今天的内容就到这里
