base64 前端显示 data:image/jpg;base64
CSDN 2024-06-12 14:33:03 阅读 81
通常base64是后端服务之间传输时常用的一种方式。即把图片流转成了byte数组,再转成一长串字符串(这就是我们看到的base64格式字符串)。
想要还原成图片,后端通常的做法是将base64的字符串转成byte数组,再将byte数组装到流里写出来,就是图片了。
放在前端显示,主需在这字符串前加上data:image/jpg;base64,jpg换成你图片的后缀。
前端有两种显示方式:1.放CSS里,2.放img标签里。
在css里的写法:
#est_switch { background: url(data:image/jpg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gIoSUNDX1BST0ZJTEUAAQEAAAIYAAAAAAQwAABtbnRyUkdCIFhZWiAAAAAAAAAAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAAHRyWFlaAAPsxpwBwiKNIuGxlOz0WhhpoWCMcALb/iyiLCTt8l10f//Z) no-repeat center;}
在html代码img标签里的写法
<img src="data:image/gif;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gIoSUNDX1BST0ZJTEUAAQEAAAIYAAAAAAQwAABtbnRyUkdCIFhZWiAAAAAAAAAAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAAHRyWFlaAAPsxpwBwiKNIuGxlOz0WhhpoWCMcALb/iyiLCTt8l10f//Z">
还有就是迅雷的地址:
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
声明
本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。