php中%3ch1%3e是什么意思,【已解决】url-loader中的DataUrl的含义

折腾：

期间，需要去搞清楚

url-loader中的DataUrl指的是啥。

what is DataUrl

【总结】

(0)定义

DataUrl=Data URL=地址前缀为data:的URL

允许内容创建者嵌入小的文件到文档中。

(1)语法

是：data:[][;base64],

mediatype：比如’image/jpeg’，默认为：text/plain;charset=US-ASCII

比如：data:,Hello%2C%20World!

Simple text/plain datadata:text/plain;base64,SGVsbG8sIFdvcmxkIQ%3D%3Dbase64-encoded version of the abovedata:text/html,%3Ch1%3EHello%2C%20World!%3C%2Fh1%3EAn HTML document with

Hello, World!

data:text/html,

An HTML document that executes a JavaScript alert. Note that the closing script tag is required.

background-image: url(“data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC”);

(2)工具

对于把数据编码为base64的话，有很多工具，比如：

Linux类系统中：uuencode -m input_file_name remotename

输出：begin-base64 664 test

YSBzbGlnaHRseSBsb25nZXIgdGVzdCBmb3IgdGV2ZXIK

====

js中的话，可以使用API：

php中的base64编码：$ php -r “echo base64_encode(file_get_contents(‘check.png’));”

(3)限制

而对于DataUrl的最大值的限制，不同浏览器也不太一样：

IE7：不支持DataUrl

Opera 11：65K

Explorer 8：仅限制图像和css等文件的大小

IE8：32KB

IE9：文件最大限制为4GB

(4)作用

DataUrl的其中一个作用是：

通过把本来应该用http链接的方式去加载网络上的图片的方式，变成本地直接加载dataUrl了，从而使得：

减少了Http的请求次数，提高网页加载速度和性能

(5)用法和场景

典型的使用场景是：

对于一个很小的图片，才把图片的数据转换为base64，写成DataUrl的方式

比如某个很小的红色对勾的图片：

一般的写法是：

写成DataUrl的方式就是：

正因此，对于Webpack中url-loader中，才往往会加上limit的参数，比如：{test: /\.(png|jpg)$/, loader: ‘url-loader?limit=8192’} // inline base64 URLs for <=8k images, direct URL