您的位置：首页 > Web前端 > HTML

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

2016-09-19 16:51 337 查看

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。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航