首页 前端知识 HTML中img标签base64显示图片

HTML中img标签base64显示图片

2024-08-25 23:08:58 前端知识 前端哥 480 759 我要收藏
   在浏览网页的时候大家可能会注意到一个奇怪的现象,有的图片的路径后面是一串很长的字符串,例如:
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”/>
转载请注明出处或者链接地址:https://www.qianduange.cn//article/16846.html
标签
评论
发布的文章

LoopBack组件JSONAPI使用指南

2024-09-04 23:09:43

编译JSONCPP源码

2024-09-04 23:09:49

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!