zoukankan      html  css  js  c++  java
  • 【js html】对于<img>图片的引用填充,src可以给什么值?

    平时多见的<img>的使用,常见于如下:

    <img class="img-responsive img-rounded" src="static/img/user.jpg" alt="">

    但是如果src地址不便给出,可以给出如下:

    <img class="img-responsive img-rounded" src="data:image/png;base64, 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" alt="">
    View Code

    两个效果一样

    可以直接将src中字符串拷贝到地址栏中 就可以看到图片

    转载如下:http://blog.csdn.net/qq_18979049/article/details/78610502?locationNum=10&fps=1

    这是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’));
    目前,IE8、Firfox、Chrome、Opera浏览器都支持这种小文件嵌入。

    举个图片的例子:

    网页中一张图片可以这样显示:

    <img src=“http://www.letuknowit.com/images/wg.png”/>
    也可以这样显示:
    <img src=“data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MYQ6i1BuqFaq1CKSVcxZ2Acs6406KUgpt5/LCKuVgz5BDCSb13ZO99ZOdcZGvt4mJjzMVKqcha68iIePB86GAiOv8CDADlIUQBs7MD3wAAAABJRU5ErkJggg%3D%3D”/>

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

  • 相关阅读:
    EasyUi中使用自定义图标
    EasyUi初始配置
    struts2文件上传
    转换器
    Oracle 视图
    存储过程的优缺点
    Oracle 序列详解
    plsql使用技巧
    MYSQL和ORACLE的一些区别
    JAVA操作Excle之Poi(二)批量导出Excle数据
  • 原文地址:https://www.cnblogs.com/sxdcgaq8080/p/8417689.html
Copyright © 2011-2022 走看看