网站首页 > 技术文章 正文
我们知道一个网页中,要展示图片一般使用<img src="http://www.img.com/some.jpg" />,img标签中的src属性值为图片的url链接,但是现在还有一种方式:
<img src="data:image/gif;base64,R0lGODlhAwADAIABAL6+vv///yH5BAEAAAEALAAAAAADAAMAAAIDjA9WADs(。。。太长省略了。。。)" />
这种方式显示图片有什么好处呢?
1.减少了HTTP请求,加快页面加载速度;
2.某些文件可以避免跨域的问题;
3.没有图片更新要重新上传,还要清理缓存的问题;
如何获取图片的base64编码呢?
下面以php作为示范,获取图片的base64编码:
<?php
$img = '换成你自己的图片绝对路径.jpg';
//获取图片信息,主要是取得图片mime信息
$image_info = getimagesize($img);
//将file_get_contents读取得到的文件流信息,进行base64编码
$content = base64_encode(file_get_contents($img));
//组合拼接图片的信息
$base64_content = 'data:'.$image_info['mime'].';base64,'.$content;
echo '<img src="'.$base64_content.'" />';
将上面的代码保存为demo.php存放在服务器根目录,然后访问此文件,会得到下面的效果
新手发文,请多指教!
猜你喜欢
- 2024-10-16 【验证码逆向专栏】百某网数字九宫格验证码逆向分析
- 2024-10-16 jquery-利用canvas让图片旋转角度
- 2024-10-16 一文带你搞懂JS实现压缩图片 js压缩上传图片
- 2024-10-16 前端性能优化之请求优化 前端性能优化问题
- 2024-10-16 Serverless 实战:如何为你的头像增加点装饰?
- 2024-10-16 谈谈图片上传及canvas压缩的流程 js 图片压缩后上传
- 2024-10-16 妹子委婉地和男友说没钱了,结果差点换来一张luo照?
- 2024-10-16 Blob-对象介绍 对象object
- 2024-10-16 《小白HTML5成长之路51》canvas压缩图片上传功能的原理
- 2024-10-16 Dom-to-image截图将html生成图片 html2canvas截图
你 发表评论:
欢迎- 最近发表
- 标签列表
-
- oraclesql优化 (66)
- 类的加载机制 (75)
- feignclient (62)
- 一致性hash算法 (71)
- dockfile (66)
- 锁机制 (57)
- javaresponse (60)
- 查看hive版本 (59)
- phpworkerman (57)
- spark算子 (58)
- vue双向绑定的原理 (68)
- springbootget请求 (58)
- docker网络三种模式 (67)
- spring控制反转 (71)
- data:image/jpeg (69)
- base64 (69)
- java分页 (64)
- kibanadocker (60)
- qabstracttablemodel (62)
- java生成pdf文件 (69)
- deletelater (62)
- com.aspose.words (58)
- android.mk (62)
- qopengl (73)
- epoch_millis (61)
本文暂时没有评论,来添加一个吧(●'◡'●)