本文介绍了Base64编码的基本用途及优势，并详细解释了如何在HTML、CSS及JavaScript中使用Base64编码来展示图片，通过这种方式可以简化网页开发流程并提高效率。
base64编码
CreateTime--2017年9月26日11:12:04
Author:Marydon
1.用途
用于界面图片展示，将图片转换为Base64编码一般用于小图片上。
2.好处
2.1 不再需要去寻找一个保存图片的地方，可以让你很方便地在没有上传文件的条件下将图片插入其它的网页、编辑器中；
2.2不仅可以减少图片的请求数量（集合到js、css代码中），还可以防止因为一些相对路径等问题导致图片404错误。
3.用法
3.1 CSS中使用：background-image: url("https://img-blog.csdnimg.cn/2022010615303440280.png")；
3.2 HTML中使用：<img src="https://img-blog.csdnimg.cn/2022010615303440280.png" id="showImg"/>；
3.3 在js中使用：document.getElementById('showImg').src = "data:image/png;base64," + "图片转好的base64编码"。
4.举例
<body>
你的名字图片使用base64格式展示
<img src="https://img-blog.csdnimg.cn/2022010615303463248.jpeg">
</body>
效果：图片将直接展示在网页上
扫一扫
5万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
