forked from fex-team/fis
-
Notifications
You must be signed in to change notification settings - Fork 22
嵌入资源
hefangshi edited this page Jul 21, 2014
·
1 revision
在html中可以嵌入其他文件内容或者base64编码值,可以在资源定位的基础上,给资源加 ?__inline 参数来标记资源嵌入需求。
-
html中嵌入图片base64
-
源码:
<img title="百度logo" src="images/logo.gif?__inline"/>
-
编译后
<img title="百度logo" src="data:image/gif;base64,R0lGODlhDgGBALMAAGBn6eYxLvvy9PnKyfO...Jzna6853wjKc850nPeoYgAgA7"/>
-
-
html中嵌入样式文件
-
源码:
<link rel="stylesheet" type="text/css" href="demo.css?__inline">
-
编译后
<style>img { border: 5px solid #ccc; }</style>
-
-
html中嵌入脚本资源
-
源码:
<script type="text/javascript" src="demo.js?__inline"></script>
-
编译后
<script type="text/javascript">console.log('inline file');</script>
-
-
html中嵌入页面文件
-
源码(推荐使用):
<link rel="import" href="demo.html?__inline">
-
编译后
<!-- this is the content of demo.html --> <h1>demo.html content</h1>
-
源码(功能同<link ref="import" href="xxx?__inline">语法,此语法为旧语法,
不推荐使用
):<!--inline[demo.html]-->
-
编译后
<!-- this is the content of demo.html --> <h1>demo.html content</h1>
-
在js中,使用编译函数 __inline() 来提供内容嵌入能力。可以利用这个函数嵌入图片的base64编码、嵌入其他js或者前端模板文件的编译内容, 这些处理对html中script标签里的内容同样有效。
-
在js中嵌入js文件
-
源码:
__inline('demo.js');
-
编译后
console.log('demo.js content');
-
-
在js中嵌入图片base64
-
源码:
var img = __inline('images/logo.gif');
-
编译后:
var img = 'data:image/gif;base64,R0lGODlhDgGBALMAAGBn6eYxLvvy9PnKyfO...Jzna6853wjKc850nPeoYgAgA7';
-
-
在js中嵌入其他文本文件
-
源码:
var css = __inline('a.css');
-
编译后:
var css = "body \n{ color: red;\n}";
-
与html类似,凡是命中了资源定位能力的编译标记, 除了src="xxx"之外,都可以通过添加
?__inline
编译标记都可以把文件内容嵌入进来。src="xxx"被用在ie浏览器支持的filter内,该属性不支持base64字符串,因此未做处理。
-
在css文件中嵌入其他css文件
-
源码:
@import url('demo.css?__inline');
-
编译后
img { border: 5px solid #ccc; };
-
-
在css中嵌入图片的base64
-
源码:
.style { background: url(images/logo.gif?__inline); }
-
编译后
.style { background: url(data:image/gif;base64,R0lGODlhDgGBALMAAGBn6eYxLvvy9PnKyfO...Jzna6853wjKc850nPeoYgAgA7); }
-