首页 > Java技术 > html中嵌入图片
201212月28

html中嵌入图片

起因

      上两天将本地开发的项目部署到服务器上,而服务器上的域名是指到某虚拟目录下,例如http://iitshare.com/project/,因为开发是用的是根目录,html中的图片都是”用域名+目录+图片地址“的方法构造成绝对地址,而css中因为无法传入域名,所以css中的图片都是/xxx/xxx.png这样的地址,在部署到服务器上后,无法加载图片。当时想过用类似.mht的方法,将所有素材都打包到文件中,却没有找到实现方法,就暂将css中所有的图片地址都改成了相对地址。虽然这样就解决了找不到图片的问题,但是却不是很灵活,比如后面要动静分离,将图片放到不同域名下的cdn中。

解决

      今天在网上找资料,发现了“data:image base64”这种方式:

</pre>
<img src="data:image/gif;base64,R0lGODlhDwAPAKECAAAAzMzM/////
wAAACwAAAAADwAPAAACIISPeQHsrZ5ModrLlN48CXF8m2iQ3YmmKqVlRtW4ML
wWACH+H09wdGltaXplZCBieSBVbGVhZCBTbWFydFNhdmVyIQAAOw==" 
alt="Base64 encoded image" width="150" height="150" />
<pre>

      不过这好像不兼容ie6,当然也有变通的方式,具体方式可以查看这里,也许你们都见过了,反正我是第一次见,It’s amazing!

文章作者: iitshare
本文地址:http://www.iitshare.com/html-embed-img.html
版权所有 © 转载时必须以链接形式注明作者和原始出处!

更多

One Response to “html中嵌入图片”

  1. #1 免费部落 回复 | 引用 Post:2013-11-20 20:35

    这个方法好,我去试试看!

发表评论