base64图片展示（后端给base64数据，前端展示图片）

1
2
3
4
5
6
7
8
9
10
11
12
-- coding: utf-8 --

import base64

with open("C:\Users\user\Desktop\20170508134213.png","rb") as f:

b64encode是编码，b64decode是解码

    base64_data = base64.b64encode(f.read())

base64.b64decode(base64data)
 print(base64_data)

前端html中如何直接调用base64编码呢？

使用

1
<img src="data:image/jpg;base64,这里是base64的编码"/>
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
export default {

   data: {

           return {

                 imageData: '',

          }

    },

   created() {},

   methods:{

      imgShow() {

           let imageData = 'data:image/png;base64,' + resp.data.imageByte(后端传来数据)

            //如果base64位图片没有带前面的头：'data:image/png;base64,'，需要添加，才可以展示图片


     }

   },

  

}

几种常见的格式

1.png格式：this.src = ‘data:image/png;base64,’ + this.baseImg （this.baseImg为base64编码的png图片数据） 2.jpeg格式：this.src = ‘data:image/jpeg;base64,’ + this.baseImg （this.baseImg为base64编码的jpeg图片数据） 3.gif格式 ： this.src = ‘data:image/gif;base64,’ + this.baseImg （this.baseImg为base64编码的gif图片数据） 4.pdf格式 ： this.src = ‘data:application/pdf;base64,${res}’ （res为base64编码的pdf图片数据）