uni-app概要 |
通过 HBuilderX 可视化界面 |
通过 HBuilderX发布为小程序 |
通过vue-cli命令行运行uni app项目 |
框架简介 |
使用Vue.js注意事项 |
uni-app 常见问题 |
当前阅读教程:Uni-app入门教程 > 导入资源的几种方式 | |
阅读(22555525) 收藏 赞(5685) 分享 | |
上一篇: uni-app工程目录结构 | 下一篇: uni-app 应用生命周期 |
模板内引入静态资源template内引入静态资源,如image、video等标签的src属性时,可以使用相对路径或者绝对路径,形式如下 <!-- 绝对路径,/static指根目录下的static目录,在cli项目中/static指src目录下的static目录 --> <image src="/static/logo.png"></image> <image src="@/static/logo.png"></image> <!-- 相对路径 --> <image src="../../static/logo.png"></image> 注意 l @开头的绝对路径以及相对路径会经过base64转换规则校验 l 引入的静态资源在非h5平台,均不转为base64。 l H5平台,小于4kb的资源会被转换成base64,其余不转。 l 自HBuilderX 2.6.6-alpha起template内支持@开头路径引入静态资源,旧版本不支持此方式 l App平台自HBuilderX 2.6.9-alpha起template节点中引用静态资源文件时(如:图片),调整查找策略为【基于当前文件的路径搜索】,与其他平台保持一致 l 支付宝小程序组件内 image 标签不可使用相对路径 js文件引入js文件或script标签内(包括renderjs等)引入js文件时,可以使用相对路径和绝对路径,形式如下 // 绝对路径,@指向项目根目录,在cli项目中@指向src目录 import add from '@/common/add.js' // 相对路径 import add from '../../common/add.js' 注意 js文件不支持使用/开头的方式引入 css引入静态资源css文件或style标签内引入css文件时(scss、less文件同理),只能使用相对路径 /* 绝对路径 */ @import url('/common/uni.css'); @import url('@/common/uni.css'); /* 相对路径 */ @import url('../../common/uni.css'); 注意 自HBuilderX 2.6.6-alpha起支持绝对路径引入静态资源,旧版本不支持此方式 css文件或style标签内引用的图片路径可以使用相对路径也可以使用绝对路径,需要注意的是,有些小程序端css文件不允许引用本地文件(请看注意事项)。
/* 绝对路径 */ background-image: url(/static/logo.png); background-image: url(@/static/logo.png); /* 相对路径 */ background-image: url(../../static/logo.png); 注意 l @开头的绝对路径以及相对路径会经过base64转换规则校验 l 不支持本地图片的平台,小于40kb,一定会转base64。(共四个平台mp-weixin, mp-qq, mp-toutiao, app v2) l h5平台,小于4kb会转base64,超出4kb时不转。 l 其余平台不会转base64 |
|
上一篇: uni-app工程目录结构 | 下一篇: uni-app 应用生命周期 |