uni-app 系列之(三)—— 资源引用路径

2023-11-02

模板内引用静态资源

template 内引用静态资源,如 image,video 等标签的 src 属性时,可以使用相对路径或绝对路径,如下:

<!-- 绝对路径,/static指根目录下的static目录,在cli项目中/static指src目录下的static目录 -->
<image class="logo" src="/static/logo.png"></image>
<image class="logo" src="@/static/logo.png"></image>
<!-- 相对路径 -->
<image class="logo" src="../../static/logo.png"></image>

注意:

  • @初始的绝对路径以及相对路径会通过 base64 转换规则校验
  • 引入的静态资源在非 h5 平台,均不转为 base64
  • H5 平台,小于 4kb 的资源会被转换成 base64,其余不转
  • HBuilderX 2.6.6-alphatemplate 内支持@初始路径日期静态资源,旧版本不支持此方式

js 文件引用

js 文件或 script 标签内(包括 renderjs 等)日期 js 文件时,可以使用相对路径和绝对路径,如下:

// 绝对路径,@指向项目根目录,在cli项目中@指向src目录
import utils from '@/common/utils.js'
// 相对路径
import utils from '../../common/utils.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);

注意:

  • @初始的绝对路径以及相对路径会通过 base64 转换规则校验
  • 不支持本地图片的平台,小于 40kb,一定会转 base64。(共四个平台 mp-weixin,mp-qq,mp-toutiao,app v2
  • h5 平台,小于 4kb 会转 base64,超过 4kb 时不转。
  • 其余平台不会转 base64
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

uni-app 系列之(三)—— 资源引用路径 的相关文章

  • 如何将内联 JavaScript 与 Express/Node.js 中动态生成的内容分开?

    对于具有几年 Web 开发经验但没有找到答案的人来说 这是一个有点菜鸟的问题程序员堆栈交换 or Google 我决定在这里问一下 我在用Express网络框架Node js 但这个问题并不特定于任何 Web 框架或编程语言 以下是从数据库
  • 摩卡 - Chai Karma“套件未定义”

    我对 jscript tdd 很陌生 遇到了问题 希望有人能告诉我我在做什么 在浏览器中运行测试 通过 HTML 文件 一切正常 通过节点和业力运行它们我得到以下异常 我想在 node js 主机的 karma 中使用 Mocha 和 Ch
  • 带有淘汰赛js的隐形recaptcha

    我正在完成隐形验证码 但我在实现它时遇到问题 谷歌开发人员页面中的代码显示它应该是这样的
  • Bootstrap按钮加载+Ajax

    我正在使用 Twitter Bootstrap 的按钮加载状态 http twitter github com bootstrap javascript html buttons http twitter github com bootst
  • 防止 iOS 键盘在 cordova 3.5 中滚动页面

    我正在使用 Cordova 3 5 和 jQuery mobile 构建 iOS 应用程序 我在大部分应用程序中禁用了滚动功能 但是 当我选择输入字段时 iOS 键盘会打开并向上滚动页面 我不想要这个功能 由于输入足够高 键盘不会覆盖它 我
  • 为什么 IE8 在我的图像锚标记上添加底部边框?

    我知道 这很可悲 但今天早上 IT 刚刚在我的机器上安装了 IE8 我立刻遇到了一个明显的问题 尽管我知道答案就在我面前 但我已经把它搞砸了太久了 首先 这是网站 www mchenry edu http www mchenry edu 在
  • 尝试将数据存储在点击器网站中

    我正在尝试存储一个名为的变量score无论何时刷新 您都会一次又一次地使用它 我不明白的是它的代码是什么 我尝试了一些方法 但似乎都不起作用 这是我的答题器网站 但是当我尝试使用 JavaScript 来存储它时 它不起作用window o
  • Firefox 不会在使用 jQuery AJAX 加载的内容上呈现 CSS 样式

    我有一个网站 允许用户对书籍和文章发表评论 主表单有一个搜索输入 用于查找相关书籍或文章 来源 我使用 jQuery 根据输入的搜索词从外部站点动态加载新源 然后还使用 AJAX 返回列表中的源 我有两个问题 现在 在用户输入四个字符后 j
  • 使用 CSS 使一行 div 高度相同

    我有一排必须具有相同高度的 div 但我无法提前知道该高度可能是多少 内容来自外部源 我最初尝试将 div 放置在封闭的 div 中并将它们向左浮动 然后我将它们的高度设置为 100 但这没有明显的效果 通过将封闭 div 的高度设置为固定
  • 网站的主体和元素固定在 980px 宽度上,不会缩小

    我试图在 Rails 应用程序顶部启动前端 仅 HTML CSS 页面 但在使用 320px 视口时遇到问题 有些元素不会按比例缩小 我不明白为什么 我已经完成了检查元素 为各种元素提供了max width 100 and or width
  • 如何解决 Typescript 构建中的错误“找不到模块 'jquery'”

    我目前在 ts 文件的顶部有这个import require jquery 我这样做是因为我试图在我的打字稿文件中使用 jquery 但我似乎无法编译它 因为它返回标题中所述的错误 我正在使用 ASP NET CORE 脚本文件夹 tsco
  • 刷新页面时保存用户的选择

    我目前有一个页面显示不同团队的数据 我有一些数据 用户可以单击使其处于 打开 或 关闭 状态 并为每个数据显示不同的图标 它基本上就像一个清单 只是没有物理复选框 我想记住哪些 复选框 已被选中 即使在用户刷新页面或关闭浏览器并稍后返回之后
  • DataTables row.add 到特定索引

    我正在替换这样的行项目 var targetRow entity row dataTable targetRow closest table dataTable DataTable dataTable row targetRow remov
  • 将 UMD Javascript 模块导入浏览器

    你好 我正在对 RxJS 进行一些研究 我可以通过在浏览器中引用它来使用该库 如下所示 它使用全局对象命名空间变量 Rx 导入 我可以制作可观察的东西并做所有有趣的事情 当我将 src 更改为指向最新的 UMD 文件时 一切都会崩溃 如下所
  • 表格行未扩展到全宽

    我有一个表格 当我将表格的宽度设置为 100 并将表格行的宽度设置为 100 时 没有任何反应或宽度发生变化 Table Normal position relative display block margin 10px auto pad
  • 带参数的事件监听器

    我想将参数传递给 JavaScript 中的事件侦听器 我已经找到了解决方案 但我无法理解它们为什么或如何工作以及为什么其他解决方案不起作用 我有 C C 背景 但是 Javascript 函数的执行有很大不同 您能否帮助我理解以下示例如何
  • 用于交互式图形绘制的轻量级 JavaScript 库? [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 我有兴趣了解用于绘制交互式图表的最轻量级 javascript 库 我掌握的数据主要是与海洋研究相关的科学数据 我知道一些 jquery
  • Jquery - 选择选项后如何获取选项的特定数据类型?

    我将直接跳到标记 然后解释我想要做什么 HTML 选择选项
  • 如何确定所有角度2分量都已渲染?

    当所有 Angular2 组件完成渲染时 是否会触发一个角度事件 For jQuery 我们可以用 function 然而 对于 Angular2 当domready事件被触发 html 只包含角度组件标签 每个组件完成渲染后 domrea
  • Vue.js[vuex] 如何从突变中调度?

    我有一个要应用于 json 对象的过滤器列表 我的突变看起来像这样 const mutations setStars state payload state stars payload this dispatch filter setRev

随机推荐

  • Class.forName用法(详解)

    主要功能 Class forName xxx xx xx 返回的是一个类 Class forName xxx xx xx 的作用是要求JVM查找并加载指定的类 也就是说JVM会执行该类的静态代码段 下面 通过解答以下三个问题的来详细讲解下C
  • Word embedding techniques

    Word embedding techniques Word embedding techniques are methods used to represent words in a numerical format such as a
  • 文件相关操作

    1 文件相关概念 1 1文件的概念 一个文件通常就是磁盘上一段命名的存储区 但是对于操作系统来说 文件就会更复杂一些 例如 一个大文件可以存储在一些分散的区段中 或者还会包含一些操作系统可以确定其文件类型的附加数据 但是这些是操作系统 而不
  • 安卓逆向(工具篇)

    安卓逆向 1 下载工具 1 apktool 可以反编译软件的布局文件 图片等资源 方便大家学习一些很好的布局 2 dex2jar 将apk反编译成java源码 classes dex转化成jar文件 3 jd gui 查看APK中class
  • java 微信开发图片发送,微信开发?Java上传Base64图片

    class java gt import org apache commons codec binary Base64 import org apache log4j LogManager import org apache log4j L
  • 2021-07-11 layer与tier的区别(英语)

    layer与tier的区别 英语 都是层的意思 但是两个词不太一样 layer指的是多层相同的东西 比如天冷的时候盖两层被 用layer tier指的是多层不同的东西 以某种目的叠加在一起 起到一定作用 比如人的消化系统有三个层次 咀嚼破碎
  • SpringCloud集成RocketMQ实现事务消息方案

    前边的话 当前SpringCloud作为微服务开发的首选开源方案提供了完善的微服务开发技术套件 不过针对分布式领域的难题 分布式事务控制并没有成熟的方案 本篇将介绍作为柔性事务控制的优秀方案RocketMQ的使用原理和方法 通过本案例的学习
  • 升级你的GitHub终端认证方式:从密码到令牌

    升级你的GitHub终端认证方式 从密码到令牌 前言 GitHub官方在2021年8月14日进行了一次重大改变 它将终端推送代码时所需的身份认证方式从密码验证升级为使用个人访问令牌 Personal Access Token 这个改变引起了
  • 三角剖分算法(delaunay)

    开篇 在做一个Low Poly的课题 而这种低多边形的成像效果在现在设计中越来越被喜欢 其中的低多边形都是由三角形组成的 而如何自动生成这些看起来很特殊的三角形 就是本章要讨论的内容 项目地址 https github com zhiyis
  • 阿里云OSS对象存储上传文件(一)SDK安装

    因为实际项目需求 需要使用阿里云oss的对象存储来上传文件 在写代码操作之前 需要先安装SDK 编译你能使用的lib 其实前后找了不少文章 但都不太细致 所以分享一下我本人使用的经验 不代表适用所有人 仅供参考 环境是windows系统 v
  • 安装使用NVIDIA-Docker——可使用GPU的Docker容器

    参考网址 https www cnblogs com wuchangsoft p 9767074 html nvidia docker是一个可以使用GPU的docker nvidia docker是在docker上做了一层封装 通过nvid
  • 【LeetCode题解】子序列问题

    文章目录 参考资料 子序列问题模板 动态规划 一 两种思路 例题 128 最长连续序列 思路一 代码 动态规划设计 300 最长递增子序列 动态规划设计 1143 最长公共子序列 动态规划设计 516 最长回文子序列 392 判断子序列 参
  • Java发布webservice

    先附上一个webservice的视频教程 链接 https pan baidu com s 1qesv A7cp zYsL7fE5nmFw 提取码 3d6k 创建服务端 提供接口 方式一 创建一个web工程 创建一个ServiceHello
  • C++ list容器

    1 list容器基本概念 循环迭代器 链表的末尾指向链表的链头 链表的链头指向链表的链尾 链表迭代器支持前移和后移 也就是说支持 和 操作 但不支持 n 和 n 操作 不支持随机访问 2 链表构造函数 3 赋值和交换 4 大小操作 5 插入
  • 基于实例讲解lsqcurvefit参数用法

    本博文源于 数学建模 旨在讲解非线性最小二乘拟合的MATLAB实现 谈到matlab中非线性最小二乘拟合 就不得不提到lsqcurvefit与lsqnonlin 博文就讲解一下lsqcurvefit如何使用 一 函数基本用法讲解 x lsq
  • Element-UI开发指南--动画和组件基础(二)

    文章目录 内置过渡动画 fade 淡入淡出 zoom 缩放 collapse 展开折叠 组件 Layout 布局 基础布局 分栏间隔 混合布局 分栏偏移 对齐方式 响应式布局 基于断点的隐藏类 Row 属性 Col 属性 Container
  • 3.观察者模式C++用法示例

    观察者模式 一 观察者模式 1 作用 2 适用场景 3 实现要素 二 C 程序示例 一 观察者模式 观察者模式 Observer Pattern 是一种行为型设计模式 它定义了一种一对多的依赖关系 让多个观察者对象同时监听一个主题对象 当主
  • 十四届蓝桥杯java第一期模拟赛 大小写转换编译题

    问题描述 输入一个由小写英文字母组成的字符串 请将其中的元音字母 a e i o u 转换成大写 其它字母仍然保持小写 样例输入 lanqiao 样例输出 lAnqIAO 代码实现 public static void main Strin
  • 猜数_____c语言

    include
  • uni-app 系列之(三)—— 资源引用路径

    模板内引用静态资源 template 内引用静态资源 如 image video 等标签的 src 属性时 可以使用相对路径或绝对路径 如下