【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 请求。坏处呢，就是浏览器不会缓存这种图像。大家可以根据实际情况进行自由取舍。

【js html】对于img图片的引用填充，src可以给什么值？相关推荐

以Jar形式为Web项目提供资源文件（JS、CSS与图片）
一.背景二.分析 1.把我需要的JS.CSS与图片等资源copy到Web工程中. 2.通过程序采用流的方式读取Jar中的资源流再输出到页面流. 三.分析结果四.核心代码开发(Jar端) 1.org ...
Vue.js项目中,当图片无法显示时则显示默认图片
Vue.js项目中,当图片无法显示时则显示默认图片使用onerror方法最近在学习Vue时,遇到了一个问题,就是从后台传过来的图片路径无效时,需要在页面显示默认图片本人试了3种方法,2种方法失败了 ...
解决微信图片不可引用的问题
引用微信图片经常会显示不出图片会报错说这是微信的图片不能引用解决方法 :<meta name="referrer" content="never&quo ...
利用Jquery Lazyload JS插件实现网页图片延迟加载
Jquery Lazyload是一款网页图片延迟加载JS插件,本文介绍该JS的使用方法. 最新的jquery lazyload可以单独使用(即不依赖jquery),本文介绍的是依赖jquery的使用及 ...
php图片动画源码,JavaScript_jQuery插件ImageDrawer.js实现动态绘制图片动画（附源码下载），ImageDrawer.js是一款可以实现动 - phpStudy...
jQuery插件ImageDrawer.js实现动态绘制图片动画(附源码下载) ImageDrawer.js是一款可以实现动态绘制图片动画的jQuery插件.通过ImageDrawer.js插件,你可 ...
Python 把图片用文字填充
Python 把图片用文字填充 PS: 也是从网上各个帖子中学习的Python,因此代码的格式以及内容有粘贴网上其他大神的代码,如有侵权请告知删除效果图: #!/usr/bin/python # - ...
php 图片预览原理,JavaScript_纯JS实现的批量图片预览加载功能，1.实现原理直接见代码,需要一 - phpStudy...
纯JS实现的批量图片预览加载功能 1.实现原理直接见代码,需要一张转圈的小图片,需要预览的所有图片默认的位置全是这张小图片,滚轮滚到原图需要出现的位置时候,预览加载替换小图片.实现效果复制代码代码 ...
html鼠标点击切换图片,js鼠标点击图片切换效果代码分享
本文实例讲述了js鼠标点击图片切换效果.分享给大家供大家参考.具体如下: 实现原理很简单,其实是多张图片叠加起来,点击图片后依次赋予图片一个class,使其看起来在表面而已,点击图片,可以实现图片的不 ...
js大屏导出图片_超大图片全屏动态展示js插件
intense-images是一款非常实用的超大图片全屏动态展示js插件.该图片查看插件可以全屏显示超大图片,可以使用鼠标来和图片进行交互,上下左右移动鼠标会相应的移动图片,对于超大图片的展示是非常好 ...

【js html】对于img图片的引用填充，src可以给什么值？

【js html】对于img图片的引用填充，src可以给什么值？相关推荐

最新文章

热门文章