如何把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


   

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


--THE END--