data:image/png;base64,逗号后面紧跟的是一大
2019-07-23 本文已影响26人
小王子__
大家可能注意到了，网页上有些图片的src或css背景图片的url后面跟了一大串字符，比如：
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJAQMAAADaX5RTAAAAA3NCSVQICAjb4U/gAAAABlBMVEX///+ZmZmOUEqyAAAAAnRSTlMA/1uRIrUAAAAJcEhZcwAACusAAArrAYKLDVoAAAAWdEVYdENyZWF0aW9uIFRpbWUAMDkvMjAvMTIGkKG+AAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAAB1JREFUCJljONjA8LiBoZyBwY6BQQZMAtlAkYMNAF1fBs/zPvcnAAAAAElFTkSuQmCC
base64图片目的是将一些小的数据，直接嵌入到网页中，从而不用再从外部文件载入。比如上面那串字符，其实是一张小图片。目前，IE8、Firfox、Chrome、Opera浏览器都支持这种小文件嵌入。
把图片转成base64位图好处是，节省了一个HTTP 请求。坏处是浏览器不会缓存这种图像。
网上有很多免费的base64 编码和解码的工具，比如 http://www.yzcopen.com/img/imgbase64，拿去用。不谢
使用
CSS中使用：
backgroundimage:url("data:image/png;base64, +这里就是获取到的base64一大串的字符串+");
HTML中使用：
<img src="data:image/png;base64,+这里就是获取到的base64一大串的字符串+" />
