狂码一生_优质编程技术资源与您共享

狂码一生_优质编程技术资源与您共享

狂码一生技术博客站主要是以优质编程技术资源共享为核心,以交流学习为目的搭建的在线平台。我们共享一些优质的资源出来,供同行业的同胞交流与学习,让彼此之间在自身的技术上得到提升,本站主要提供程序方面的资源给大家,像PHP,C++,Javascript,html,asp.net,数据库等等方面的资源,本站计划将在后期会不断完善,建设更多类目的资源,希望能得到更多同行的支持!

如何把HTML中的图片地址源设置为Base64编码数据

前言:将图片转换成base64编码的,在web网上一般用于小图片上,不仅可以减少图片的请求数量(集合到js、css代码中),还可以防止因为一些相对路径等问题导致图片404错误。


1、图片用Base64编码支持 PNG、GIF、JPG、BMP、ICO 格式。


2、利用在线图片转换Base64的工具将图片转换为Base64编码,这里推荐两个在线转换工具地址如下:

    站长工具:http://tool.chinaz.com/tools/imgtobase

    C在线工具:http://tool.oschina.net/encrypt?type=4


3、将生成的Base代码完整复制到粘贴板,然后按照下面4、5的用法介绍按需去粘贴


4、CSS中使用:

    background-image: url("data:image/png;base64,iVBORw0KGgo=...");


5、HTML中使用:

    <img src="data:image/png;base64,iVBORw0KGgo=..." />


6、最后预览下我测试的效果:

blob.png


   

版权声明: 此文为本站源创文章[或由本站编辑从网络整理改编],
转载请备注出处: [
狂码一生 ] http://sindsun.coms=/article-details-91.html
[若此文确切存在侵权,请联系本站管理员进行删除!]

评论