html文件中嵌入图片

在一个网页中，嵌入一张图片，通常的做法是<img src="http://xxx.com/aa.png"> ，但是这样当页面加载时，如果url属于当前域名，则先开一个 http请求； 否则就要先建一个TCP连接了。 能否将一张图片的数据直接嵌入到html 中呢？ 答案是可以的。

 

方法：

生成一个a.html文件，内容如下：

 

<h3>hello html5</h3>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAALVBMVEXM3fm+1Pfb5/rF2fjw9f23z/aavPOhwfTp8PyTt/L3+v7T4vqMs/K7zP////+qRWzhAAAAXElEQVQIW2O4CwUM996BwVskxtOqd++2rwMyPI+ve31GD8h4Madqz2mwms5jZ/aBGS/mHIDoen3m+DowY8/hOVUgxusz+zqPg7SvPA1UxQfSvu/du0YUK2AMmDMA5H1qhVX33T8AAAAASUVORK5CYII=">

 

用chrome浏览器打开，即可以看到一张图片，但它却没有新建一个http(TCP)链接！可以右键保存生成的图片。

 

其中,iVBORw...后面的信息就是图片的信息，它是怎么得来的呢？

如，一张图片叫 a.jpg

使用python，生成这些信息

 

r = open('a.jpg','rb')
s = r.read()
r.close()

print s.encode('base64')

 

即可获取  iVBORw...