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图片数据)