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

globalcoding

已于 2023-11-28 13:48:52 修改

阅读量4.4k

点赞数 7

分类专栏：前端文章标签：前端 base64 图片

于 2023-11-27 15:49:20 首次发布

本文链接：https://blog.csdn.net/u011149152/article/details/134644477

版权

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

通常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;
}

thunder://QUFodHRwOi8vNDYuZHVvdGUub3JnL2R1b3RlX3FxLmV4ZVpa