一般情况,通常是在html页面中应用图片的链接,如:

<img src="http://baidu.com/logo.gif">
 
但是,这样的前提是我们需要将图片先上传到指定的网站,然后获取外链。一方面略麻烦,最主要的是存储图片的网站是否持续的支持外链引用。所以,必要的时候可以将图片直接插入到html页面中。如下
 
<img src="data:image/png;base64,.......">

其中base64逗号之后的就是将图片经过base64编码后的数据。在mac os中,terminal直接提供了base64编码工具,所以比较方便。此外需要说明的是,容易看到src后面应用的数据实际上个uri数据,对此可参考后面的参考1的介绍。

当然这种嵌入方式不好的地方就是,html文件会很臃肿,同时不能在本地将图片缓存。根据情况,各取所需吧。

参考

1. 图片base64编码利器:在线 Data URI 生成工具 – Duri.me

在html页面中直接嵌入图片数据的更多相关文章

  1. 在JSP页面中输出JSON格式数据

    JSON-taglib是一套使在JSP页面中输出JSON格式数据的标签库. JSON-taglib主页: http://json-taglib.sourceforge.net/index.html J ...

  2. 页面中 json 格式显示 数据

    在页面中,有时候我们需要的不仅仅是将数据显示出来,而且要以以 json 的格式显示数据,如显示接口的时候 我们需要如下显示 这个时候,主要用到了 <pre> 标签 $.get(" ...

  3. 笔记-返回到前一个页面时显示前一个页面中ajax获取的数据

    笔记第一部分:http://www.cnblogs.com/zczhangcui/p/6869219.html 在第一部分遇到的问题是,用ajax获取了一系列列表信息后,拼接好html后插入到了原有页 ...

  4. 点滴积累【C#】---抓取页面中想要的数据

    效果: 描述:此功能是抓取外国的一个检测PM2.5的网站.实时读取网站的数据,然后保存到数据库里面.每隔一小时刷新一次. 地址为:http://beijing.usembassy-china.org. ...

  5. 静态页面中如何传json数据

    首页传递参数组装成json数据,再编码 var param="{type:'"+type+"',text:'"+select_text+"',sele ...

  6. 将页面中指定表格的数据导入到Excel中

    function AutoExcel(){   var oXL = new ActiveXObject("Excel.Application"); //创建应该对象   var o ...

  7. 从html页面中抽取table表格数据

    /** * [getDataFromTrElems 获取表格行元素数据] * @param {[Object]} trElems [trs dom] * @param {[String]} type ...

  8. asp.net页面中实现如果图片不存在则显示默认图片

    onerror="this.src='/SysAdmin/images/noTouXiang.jpg';"

  9. js对页面中的内容进行拼音搜索,只对后台已经传过来的页面数据进行索引

    实现输入拼音(可以使用拼音首字母来查),来查询出已经存在于页面的数据 注意:这种写法只能适用于页面中已经存在的数据进行检索,大体意思是将本页内的数据拼接成一个字符串,然后通过该字符串去检索匹配的字符串 ...

随机推荐

  1. 从零开始--Spring项目整合(1)使用maven框架搭建项目

    这些年一直在用spring的框架搭建项目,现在开始我们从零开始利用Spring框架来搭建项目,目前我能想到有Spring.SpringMVC.SpringJDBC.Mybatis.WebSockt.R ...

  2. JSONP原理小记

    大家都知道JSONP(JSON with padding参数式JSON)是跨域传输数据的方法,jq等很多类库都封装了JSONP的方法,但是他的原理是怎样的呢?下面举个我认为最浅显的栗子,大家看过了都会 ...

  3. 制作TimeLine物流信息展示效果

    var TimeLine = function (_id) { this.id = _id; this._top = 40; this.vHeight = 40; this.global_top = ...

  4. [poj_3469]多核CPU

    Sample Input 3 1 1 10 2 10 10 3 2 3 1000 Sample Output 13 最小割,把模块看做点,建源点s和汇点t,以下(a,b,c)表示从a向b连一条容量为c ...

  5. css之其它技巧和经验列表

    其它技巧和经验列表(*以下实例默认运行环境都为Standard mode): 如何让层在falsh上显示? 方法: ``` 设置flash的wmode值为transparent或opaque ``` ...

  6. ajax和json数据

    一.Ajax概述 1.什么是同步,什么是异步 同步现象:客户端发送请求到服务器端,当服务器返回响应之前,客户端都处于等待     卡死状态 异步现象:客户端发送请求到服务器端,无论服务器是否返回响应, ...

  7. 使用dom4j工具包对xml文件解析

    xml文件 <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns="http: ...

  8. 洛谷 P1506 拯救oibh总部【DFS/Flood Fill】

    题目背景 oibh总部突然被水淹没了!现在需要你的救援…… 题目描述 oibh被突来的洪水淹没了>.<还好oibh总部有在某些重要的地方起一些围墙,用号表示,而一个封闭的号区域洪水是进不去 ...

  9. Python的程序结构[1] -> 方法/Method[1] -> 静态方法、类方法和属性方法

    静态方法.类方法和属性方法 在 Python 中有三种常用的方法装饰器,可以使普通的类实例方法变成带有特殊功能的方法,分别是静态方法.类方法和属性方法. 静态方法 / Static Method 在 ...

  10. ACM中的正则表达式

    layout: post title: ACM中的正则表达式 author: "luowentaoaa" catalog: true mathjax: true tags: - 正 ...