HTML中img标签base64显示图片

       在浏览网页的时候大家可能会注意到一个奇怪的现象，有的图片的路径后面是一串很长的字符串，例如：

data:image/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMAAAABJRU5ErkJggg==

       这其实是Data URI scheme，它的作用是将一些小型数据直接嵌入到网页中，从而可以不使用外部文件导入的方式加载。例如上面的例子就是一张图片。data表示取得数据的协定名称，image/jpg是数据类型名称，base64是数据的编码方法，逗号后面就是这个image/jpg文件base64编码后的数据。目前，Data URI scheme支持的数据类型有：

  

   

    

     

    
    

     

      data:,文本数据 
     
    
   

    

     

    
    

     

      data:text/plain,文本数据 
     
    
   

    

     

    
    

     

      ;javascript:;,HTML代码 
     
    
   

    

     

    
    

     

      ;javascript:;;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图片数据
     
    
  

       以img标签为例进行举例说明：

       1、正常形式：

<img src=“./images/test.jpg”/>

       2、base64转码后的形式：

<img src=“data:image/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFU”/>