base64 前端显示 data:image/jpg;base64

通常base64是后端服务之间传输时常用的一种方式。即把图片流转成了byte数组,再转成一长串字符串(这就是我们看到的base64格式字符串)。

想要还原成图片,后端通常的做法是将base64的字符串转成byte数组,再将byte数组装到流里写出来,就是图片了。

放在前端显示,主需在这字符串前加上data:image/jpg;base64,jpg换成你图片的后缀。

前端有两种显示方式:1.放CSS里,2.放img标签里。

在css里的写法:

html 复制代码
#est_switch {
 background: url(data:image/jpg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gIoSUNDX1BST0ZJTEUAAQEAAAIYAAAAAAQwAABtbnRyUkdCIFhZWiAAAAAAAAAAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAAHRyWFlaAAPsxpwBwiKNIuGxlOz0WhhpoWCMcALb/iyiLCTt8l10f//Z) no-repeat center;
}

在html代码img标签里的写法

html 复制代码
<img src="data:image/gif;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gIoSUNDX1BST0ZJTEUAAQEAAAIYAAAAAAQwAABtbnRyUkdCIFhZWiAAAAAAAAAAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAAHRyWFlaAAPsxpwBwiKNIuGxlOz0WhhpoWCMcALb/iyiLCTt8l10f//Z">

还有就是迅雷的地址:

html 复制代码
thunder://QUFodHRwOi8vNDYuZHVvdGUub3JnL2R1b3RlX3FxLmV4ZVpa

将斜杠后面base64字符串解析,得到:AAhttp://51.duote.org/duote_qq.exeZZ

jpg------data:image/jpg;base64

png------data:image/png;base64

gif------data:image/gif;base64

===========================分割线==============================

文章到此已经结束,以下是紫薯布丁

#est_switch {

background: url(data:image/jpg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gIoSUNDX1BST0ZJTEUAAQEAAAIYAAAAAAQwAABtbnRyUkdCIFhZWiAAAAAAAAAAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAAHRyWFlaAAPsxpwBwiKNIuGxlOz0WhhpoWCMcALb/iyiLCTt8l10f//Z) no-repeat center;

}

<img src="data:image/gif;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gIoSUNDX1BST0ZJTEUAAQEAAAIYAAAAAAQwAABtbnRyUkdCIFhZWiAAAAAAAAAAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAAHRyWFlaAAPsxpwBwiKNIuGxlOz0WhhpoWCMcALb/iyiLCTt8l10f//Z">

thunder://QUFodHRwOi8vNDYuZHVvdGUub3JnL2R1b3RlX3FxLmV4ZVpa

相关推荐
神仙别闹13 分钟前
基于tensorflow和flask的本地图片库web图片搜索引擎
前端·flask·tensorflow
GIS程序媛—椰子1 小时前
【Vue 全家桶】7、Vue UI组件库(更新中)
前端·vue.js
DogEgg_0011 小时前
前端八股文(一)HTML 持续更新中。。。
前端·html
ZL不懂前端1 小时前
Content Security Policy (CSP)
前端·javascript·面试
木舟10091 小时前
ffmpeg重复回听音频流,时长叠加问题
前端
王大锤43911 小时前
golang通用后台管理系统07(后台与若依前端对接)
开发语言·前端·golang
我血条子呢2 小时前
[Vue]防止路由重复跳转
前端·javascript·vue.js
黎金安2 小时前
前端第二次作业
前端·css·css3
啦啦右一2 小时前
前端 | MYTED单篇TED词汇学习功能优化
前端·学习