html中img显示图片的两种常用方式

显示图片，尤其是二维码的时候，大都是自动生成的，所以就需要能够从后台返回字符串，前台浏览器进行解析。好了，下面是这两种方式。

1、

<img src="new.png">

2、

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAEsAQAAAABRBrPYAAABG0lEQVR42u3aPRKDIBCG4bXyGB5VjsoRUlpJhF2QyZ8pBCeZ1yJj8LH6JruLRsI3x01gMBgMBvsptogdk54NwdnCAOvH9Ftwkc0+sqm+AOvEnOjFdUtotBu27GAXMQsLdh1L6wvsIpYLl9Wso/oGa8D2Jm6JHfV62PlsP9IN4+HcC2vAUpGK/XsqsaWc/HOmsGasFKm8bnVMYB2ZhlWahp5tQ9WL9gFrxjQYietlgFoE1pmtVbnKo1QM66HLwJqyuno5GVf7Bb0fpWDns32g1S226IfAurJ6cxe8hmWPPGAdmSs1K/gcHew6lucpq16w/qyMtmmf/TYsWBtWP/Qr2zw/Blg/Vr8YnatG8uH9Kexsxt8hYDAYDPY37A4TakBydL2KgAAAAABJRU5ErkJggg==">

这两种方式都能够进行显示图片。下面是源码：

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>图片显示</title>
</head>
<body>
<h1>src="new.png"</h1>
<img src="new.png">
<h1>src="data:image/png;base64," 加上base64的方式</h1>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAEsAQAAAABRBrPYAAABG0lEQVR42u3aPRKDIBCG4bXyGB5VjsoRUlpJhF2QyZ8pBCeZ1yJj8LH6JruLRsI3x01gMBgMBvsptogdk54NwdnCAOvH9Ftwkc0+sqm+AOvEnOjFdUtotBu27GAXMQsLdh1L6wvsIpYLl9Wso/oGa8D2Jm6JHfV62PlsP9IN4+HcC2vAUpGK/XsqsaWc/HOmsGasFKm8bnVMYB2ZhlWahp5tQ9WL9gFrxjQYietlgFoE1pmtVbnKo1QM66HLwJqyuno5GVf7Bb0fpWDns32g1S226IfAurJ6cxe8hmWPPGAdmSs1K/gcHew6lucpq16w/qyMtmmf/TYsWBtWP/Qr2zw/Blg/Vr8YnatG8uH9Kexsxt8hYDAYDPY37A4TakBydL2KgAAAAABJRU5ErkJggg==">
</body>
</html>

下面是在浏览器中的样子：

当然，如果想知道这样的图片如何生成，可以参考java生成二维码到文件，java生成二维码转成BASE64。

html中img显示图片的两种常用方式相关推荐

python 学习系列（3）读取并显示图片的两种方法
python 读取并显示图片的两种方法在 python 中除了用 opencv,也可以用 matplotlib 和 PIL 这两个库操作图片.本人偏爱 matpoltlib,因为它的语法更像 mat ...
文章目录图片元素 img元素显示图片的两种写法： alt 属性与a元素连用 map元素和figure元素 figcaption 联用
文章目录图片元素 img元素显示图片的两种写法: alt 属性与a元素连用 map元素和figure元素 figcaption 联用图片元素 img元素 image 缩写,空元素 src属性 ...
php抓取图片curl,php获取远程图片的两种 CURL方式和sockets方式获取远程图片
php获取远程图片的两种:CURL方式和sockets方式获取远程图片,需要的朋友可以参考下. 方式1:sockets $a = "http://jb51.net/content/uploa ...
思科新版EI CCIE 企业网软定义中的VxLAN分布式网关两种部署方式
思科新版EI CCIE 企业网软定义中的VxLAN分布式网关两种部署方式VXLAN集中式网关部署的不足:第一,同一二层网关下跨子网的数据中心三层流量都需要经过集中三层网关转发.第二,由于采用了集中三层 ...
Silve37.Silverlight和ASP.NET相互传参的两种常用方式(QueryString,Cookie)
在本节中将讲述Silverlight和ASP.NET页面的相互传参的两种常用方式:Cookie和QueryString.首先我们新建一个名为SLConnectASP.NET的Silverlight应 ...
asp.net html silverlight 传参数,Silverlight和ASP.NET相互传参的两种常用方式(QueryString,Cookie)...
Silverlight实用窍门系列:37 程兴亮,网名煦风满裳在本节中将讲述Silverlight和ASP.NET页面的相互传参的两种常用方式:Cookie和QueryString.首先我们新建一 ...
Windows校验文件哈希hash的两种常用方式
大家经常都到哪儿去下载软件和应用程序呢?有没想过下载回来的软件.应用程序或资源是否安全呢?在 Windows 10 和 Office 2016 发布当初,很多没权限的朋友都使用第三方网站去下载安装映像 ...
AOP 详解、AOP 中通知类型、AOP 两种实现方式(Schema-base 和 AspectJ)
一.AOP AOP:中文名称面向切面编程英文名称:(Aspect Oriented Programming) 正常程序执行流程都是纵向执行流程 3.1 又叫面向切面编程,在原有纵向执行流程中添加横切 ...
python定义字符串变量有两种常用方式_Python 1基础语法二(标识符、关键字、变量和字符串)...
一.标识符标识符就是程序员自己命名的变量名.名字需要有见名知义的效果,不要随意起名 :比如 a=1 a是个变量,a这个变量名属于标识符 1 company = '小米 2 employeeNum = ...

html中img显示图片的两种常用方式

html中img显示图片的两种常用方式

html中img显示图片的两种常用方式相关推荐

最新文章

热门文章