当前位置: 首页 > article >正文

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

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


http://www.kler.cn/a/147776.html

相关文章:

  • MDK 5 各个历史版本下载地址
  • 排序算法 -快速排序
  • catchadmin-webman 宝塔 部署
  • #include<string>和#include<string.h>有什么区别
  • C语言 | Leetcode C语言题解之第556题下一个更大元素III
  • 1111111111待修改--大流量分析(三)-BUUCTF
  • MySQL-02-InnoDB存储引擎
  • git-3
  • visual c++ 2019 redistributable package
  • screen无法翻页的问题
  • MySQL表的操作『增删改查』
  • JAXB的XmlAttribute注解
  • 【Python】Vscode解决Python中制表符和空格混用导致的缩进问题
  • 如何通过内网穿透实现公网远程ssh连接kali系统
  • 才聚免费为你招聘,用人单位看过来!
  • 011 OpenCV warpAffine
  • opencv-图像金字塔
  • dsp flash如何同时烧写boot和app
  • springboot实现验证码功能
  • 解决多选删除页面不同步问题
  • 如何使用 Java 在Excel中创建下拉列表
  • JDBC编程基础
  • 动态网页从数据库取信息,然后展示。
  • 【Unity入门】LayerMask小结
  • UniApp 组件 u-tabs 详细讲解
  • pandas教程:Introduction to scikit-learn scikit-learn简介