dataimagepng;base64的用法详解

data:image/png;base64的用法详解

查看前端代码时,发现了一个字符传可以转化,比如

data:image/png;base64,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

那么这是什么呢?这是Data URI scheme。

Data URI scheme是在RFC2397中定义的,目的是将一些小的数据,直接嵌入到网页中,从而不用再从外部文件载入。比如上面那串字符,其实是一张小图片,将这些字符复制黏贴到火狐的地址栏中并转到,就能看到它了,一张1X36的白灰png图片。

在上面的Data URI中,data表示取得数据的协定名称,image/png 是数据类型名称,base64 是数据的编码方法,逗号后面就是这个image/png文件base64编码后的数据。 目前,Data URI scheme支持的类型有:

data:,文本数据
data:text/plain,文本数据
data:text/html,HTML代码
data:text/html;base64,base64编码的HTML代码
data:text/css,CSS代码
data:text/css;base64,base64编码的CSS代码
data:text/javascript,Javascript代码
data:text/javascript;base64,base64编码的Javascript代码
data:image/gif;base64,base64编码的gif图片数据
data:image/png;base64,base64编码的png图片数据
data:image/jpeg;base64,base64编码的jpeg图片数据
data:image/x-icon;base64,base64编码的icon图片数据

base64简单地说,它把一些 8-bit 数据翻译成标准 ASCII 字符,网上有很多免费的base64 编码和解码的工具,在PHP中可以用函数base64_encode() 进行编码,如:

echo base64_encode(file_get_contents(‘wg.png’));

我们把图像文件的内容直接写在了HTML 文件中,这样做的好处是,节省了一个HTTP 请求。坏处呢,就是浏览器不会缓存这种图像。大家可以根据实际情况进行自由取舍。

https://www.aimks.com/css-path-data-image-png-usage-base64.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值