Html img显示图片的三种方式

1.显示本地图片

2.显示网络上的图片,不过网络上的图片就是需要每次都去加载,可能会费流量

3.下面这种就是我们今天所要讲的第三种方式显示图片,它其实也就是根据http网络上的图片通过利用Data URL(data:image/jpg;base64,)将小图片生成数据流形式显示出来的

有时候我们会看到 <img src="data:image/jpg;base64,xxxxxxx……” />

这里的"xxxxxxx……”是一大串小图片生成数据流形式,这种方法的好处是:不用总是加载图片,而且是在没办法加载本地的图片的同时可以考虑这种,由于本人是做android客户端的,需要做内嵌页,所以这种是很好的方法.

那这些代码是如何生成的咧？

先看下这些代码“data:image/jpg;base64,xxxxxxx……” 就是一张图片的Data URL，就是利用base64编码把图片数据翻译成标准ASCII字符。

等同于：

显示结果：

Data URL是在本地直接绘制图片，不是从服务器加载，所以节省了HTTP连接，起到加速网页的作用。
语法：

data:image/jpg;    声明数据协议及类型名称
base64,           编码形式为base64
xxxxxxx……          base64编码结果

最后附上Data URL的生成方法（PHP）：

<?php
$img_file = file_get_contents("http://www.oschina.net/img/logo_s2.png");
echo base64_encode($img_file);

这里可以在一些在线测试php代码的网站上获取这个xxxxxxx……(比如在:http://www.mcqyy.com/RunCode/php/上进行运行得到这串"xxxxxxx……")

4.https://www.base64-image.de/

这里可以把图片转化为在线Base64

注意：本方法适合于小图片，大图片就不要考虑了，另外IE8以下浏览器不支持这种方法。用这种方法会加重客户端的CPU和内存负担，总之有利有弊。

Html img显示图片的三种方式相关推荐

给Teams消息附加图片的三种方式
Teams消息支持三种不同的方式来添加图片,这篇文章我们来一起看一下这三种方式. Inline图片 var imagePath = Path.Combine(Environment.CurrentDi ...
ipad使用计算机的图片大全,三种方式备份 iPad 照片
三种方式备份 iPad 照片是一个重要的备份照片从 iPad.这是因为这些照片记录了幸福和悲伤在你的生活.为了让他们的肉体,备份是一个不错的选择.照片通常捕获大量的存储,可能会迫使你有没有足够的空间 ...
关于mysql存取图片的三种方式（含源码示例）
最近在做小程序的后台,要求将小程序用户以upload方法上传的图片保存到mysql数据库中. 然后机缘巧合三种方式都试了,所以专门整理出来分享给大家.可能有的地方说的不太对,欢迎大家帮纠正. ==== ...
Android TextView里直接显示图片的三种方法
方法一:重写TextView的onDraw方法,也挺直观就是不太好控制显示完图片后再显示字体所占空间的位置关系.一般如果字体是在图片上重叠的推荐这样写.时间关系,这个不付源码了. 方法二:利用Text ...
MarkDown添加图片的三种方式
Markdown插图片有三种方法,各种Markdown编辑器的插图方式也都包含在这三种方法之内. 插图最基础的格式就是: ![Alt text](图片链接 "optional title&q ...
QT设置背景图片的三种方式
QPalette的方法基本步骤: (1). 首先设置QWidget的autoFillBackground属性为真 (2). 然后定义一个QPalette对象,设置QPalette对象的背景属性(颜色 ...
在MFC对话框中显示图片的三种方法（有两种使用OpenCv）
最近写了一个用对话框显示图片的程序,这里将学习到的东西整理一下: 编程环境:VC6.0+OpenCv1.0 准备工作:用VC6.0生成一个对话框外壳(全被采用默认设置),然后在对话框中添加一个静态控件 ...
element组件table表格/form表单显示弹窗的三种方式
element组件table表格显示弹窗的两种方式 <el-table-columnlabel="地址"prop="Address"min-width=& ...
cocos2d-x 中添加显示文字的三种方式 LabelTTF 、LabelBMFont 和 LabelAtlas
在 cocos2d-x 中有三个类可以在层或精灵中添加文字: LabelTTF LabelBMFont LabelAtlas LabelTTF 直接支持使用 TTF 字库,可以支持全部的中文,但是效率 ...

Html img显示图片的三种方式

Html img显示图片的三种方式相关推荐

最新文章

热门文章