不引入外部文件也可以显示图片

相信大家对<img>这标签一定再熟悉不过了，然而你熟悉的src后边跟的那个文件一定是一个外部文件吧？无论是在html中这样写

 <img src="a.gif" alt="test" />还是在css中这样写background:url(a.gif) no-repeat 0 0;无疑都给页面增加了一个请求，因为它们都是把a.gif作为一个外部文件链接的。那么怎么才可以显示图片又不增加请求数呢？或许你想到了用特殊字符（如果不知道请看这里网 页美化你还用小图标吗），但是这种方法只能显示特定的图片，还有其他方法？答案是，当然！先看下边的效果图

外部引入效果：

这个图片效果和传统的图片插入方式没什么区别吧！

正式介绍今天的主角data URIs， 细心的朋友可能已经查看了页面源代码，是不是发现了不同之处？就是这堆乱码

< img  width ="513"  height ="391"  title =""  alt =""  src ="https://i-blog.csdnimg.cn/blog_migrate/193b052c149192a70b926574da6e9c49.jpeg"   />

原理就是将图片转换成了64位的编码，虽然看起来吓人用起来还是蛮快的。

可能有朋友很快就提出疑问：转换成字符串，会不会有长度限制？答案是有，图片最大为32768 Bytes。

问题继续：我怎样去转换我自己的图片呢？

看这里 一个在线的转换工具。

问题不断：浏览器兼容怎么样？是不是都兼容？

这个问题好，这个效果在Opera 7.2+, Firefox, Safari, Netscape, Mozilla都支持，但是IE系列里只有IE8支持，不过这里有解决方案。

还有问题：不会每用一个图片都要转换一次吧？修改起来太麻烦了吧？

可以在需要时页面中动态的转换，php中可以像这样

<? php  echo   base64_encode ( file_get_contents ( " ../images/folder16.gif " ))  ?>

其他语言可能需要自己写喽！

 

 

 

 

转载于:https://www.cnblogs.com/gudao119/archive/2010/04/07/1706022.html