微信小程序中使用绝对路径

最新推荐文章于 2023-09-27 21:31:54 发布
最新推荐文章于 2023-09-27 21:31:54 发布
阅读量3.5k 收藏
点赞数 1
分类专栏： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JSON_a/article/details/104996082
版权

核心思路：在 路径 '/'上做手脚
当在所有路径前加上/后，对于.wxml，会从pages开始读取

  1. 文件结构如下
    app.json
    pages
    index
    index.wxml
    images
    logo.png

  2. 我们要在index.wxml引用logo.png
    //相对路径
    方法1: <image src="../../images/logo.png" />
    //从pages开始的绝对路径
    方法2: <image src="/../images/logo.png" /> //这句翻译出来就是 从pages目录开始，返回到上一级读取images文件夹

小透明_c
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序（八）实战——加载图片images
欢迎交流PHP和前端知识QQ：634487911
07-09 2万+
1.加载本地图片本地路径：/pages/images/1.png&lt;image class="widget_arrow" src="/pages/images/1.png" mode="aspectFill"&gt;&lt;/image&gt;在wxss中设置图片样式.widget_arrow{ width:25px; height:25px; }2.加载网络图片网络图片地...
微信小程序开发入门（二）image标签及图片样式
weixin_43037257的博客
11-11 7484
一、image标签显示一张图片
关于img标签的相对路径和绝对路径以及a标签的一些属性问题
热门推荐
Apologize
02-19 2万+
关于img标签路径的问题以及a标签的一些属性设置
微信小程序实现图片压缩功能
11-30
小龙大哥的微信小程序在初始阶段相当于IE界的6，在这里给大家说一个刚趟过去的坑。 拍照的API。 wx.chooseImage({ count: 1, // 默认9 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有 success: function (res) { // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片 var tempFilePat
接口老是变！2023年微信小程序最新获取头像onChooseAvatar的方法
04-20
第一次写的资源文章： 我目前是小白，初出茅庐原生写法，相互学习，共同进步！ 小弟虚心求教，大神勿喷请多多指点赐教； 1通过onChooseAvatar绑定button事件点击获取头像返回临时头像链接； 1.1分别定义了全局和缓存了头像临时Url（因为毕竟是临时链接，后续可以传服务器生成永久链接，这样就不会失效） 1.2自动随机生成了头像的文件名（方便上传时定义了图片名称） 1.3获取了头像链接存到了缓存 在（我的个人中心）页面可取缓存同步显示用户头像 正在开始学小程序开发的朋友们后续请关注我一下， 我这边接接下来的文章会出： 2【昵称获取的方法详解】 3【获取用户code,openid,session_key的方法】 4【手机号获取和存入数据库方法】 5【根据用户openid更新数据库里用户的昵称、手机号、等信息方法】 和 原生代码分享， 也是小白刚学小程序开发的同学学习进度差不多的话， 有什么其它问题也可评论一起探讨突破，期待你的关注一起进步！ 请看下回分解，感谢支持！
微信小程序 - 相对定位和绝对定位 - 相对路径和绝对路径
weixin_34358365的博客
12-05 1169
微信小程序 - 相对定位和绝对定位 相对定位relative，绝对定位absolute 相对定位：元素是相对自身进行定位，参照物是自己. 绝对定位：元素是相对离它最近的一个父级元素进行定位. 相对定位：relative position:relative; /*相对定位*/ left:50rpx; /*相对于自己往右偏离50*/ top:50rpx; /*相对于自己往下偏离5...
微信小程序配置绝对路径
qq_42044542的博客
12-19 3039
微信小程序配置绝对路径。很简单。请不要再说不支持绝对路径了！
微信小程序配置绝对路径引入文件
欢迎来到我的博客！在这里，我将分享我在前端开发方面的知识和经验。让我们一起探索前端开发的无限可能！
07-02 2122
微信小程序默认使用相对路径引入文件 在多层文件夹时需要很长前缀。在app.json里面配置。
微信小程序image标签的使用
最新发布
qq_46099629的博客
09-27 1866
标签默认会根据图片的宽高自适应大小，如果没有设置图片的宽高属性，则会使用图片的原始宽高。标签也有默认的边框线，可以通过CSS样式来修改。在小程序中，我们可以使用。
WPF在XAML中利用绝对路径和相对路径设置图片
tengfeipu的博客
07-29 8766
在这几天写的小程序中，所有的图片都是利用绝对路径添加的，被老师吐槽不专业了。 这里稍微总结一下在XAML中使用相对路径添加图片的方法。 WPF引入了统一资源标识Uri(Unified Resource Identifier)来标识和访问资源。其中较为常见的情况是用Uri加载图像。Uri表 达式的一般形式为：协议+授权+路径 协议：pack:// 授权：有两种。一种用于访问编译时已经知道的文件，...
微信小程序中实现一对多发消息
03-29
微信小程序中各个界面之间的传值和通知比较蛋疼。所以模仿了iOS中的通知中心，在微信小程序中写了一套类似的通知中心。 通知中心可以做到：1对多发消息，传递object。使用十分简洁。 使用时，在需要接收消息的界面...
微信小程序中实现一对多发消息详解及实例代码
12-09
微信小程序中实现一对多发消息详解及实例代码 微信小程序中各个界面之间的传值和通知比较蛋疼。所以模仿了iOS中的通知中心，在微信小程序中写了一套类似的通知中心。 通知中心可以做到：1对多发消息，传递object。...
微信小程序-第一个微信小程序demo
08-06
第一个微信小程序demo 项目简介  这个demo有8个页面:欢迎页、登录注册页、场馆首页、场馆详情页、课程首页、个人中心、我的订单、我的收藏。场馆首页中的场馆列表加载更多出的数据是请求的接口数据，场馆详情页...
创建微信小程序页面的命令行工具
01-27
自动化生成微信小程序页面，样式支持自定义 自动更新app.json,添加生成页面 [NEW]自动化生成微信小程序组件，样式支持自定义 [NEW]支持自定义模板 安装 $ yarn add create-wxapp-page 用法 查看帮助 $ create-wxapp-...
简历怎么写
JSON_a的博客
03-19 2609
简历是你进入面试的敲门砖，也是留给意向公司的第一印象，所以这个很重要，必须在这上面做足了文章，一份优秀的面试简历是整个面试成败的重中之重，我们会详细分析如何准备简历才能保证简历不被刷掉。 准备专业技能 关于对技术技能的描述有很多种，有五种的也有三种的，而且每个人对词汇的理解都不一样，我结合相关专家的理解和自己的理解来简单阐述下描述词汇的区别，我们这里只讲三种的了解、熟悉、精通。 了解：使用过某一...
小程序构建npm失败解决办法
JSON_a的博客
03-19 2143
小程序中构建npm不能成功创建，踩坑后进行记录，避免下次又掉坑里 小程序构建 npm 失败 官方文档地址(官方是错误的) csdn 参考地址 小程序从基础库版本 2.2.1 以上就开始支持 npm 安装第三方包了，看了文档之后 首先，如果你按文档走下去： 1、执行命令安装 npm install 2、工具 -> 构建 npm 恭喜你，将会看到没有找到 node_modules 目录。 问...
小程序最新版IDE支持了api-mock 20200319
JSON_a的博客
03-19 328
小程序最新版IDE支持了api-mock 支持api-mock导入导出,可以给团队内其他成员使用 再也不用在本地js中进行mockData 支持了大部分的原生API(比起json-server就要好用不少) 官方文档 ...
支付宝和微信的差异(持续更新)
JSON_a的博客
03-19 254
支付宝小程序 支付宝的根节点不是 page 标签, 但是可以用全局的一个类名进行代替 支付宝的支付 api 和微信有差异 支付宝只要吊起弹窗即触发成功回调(微信支付成功才算成功); 成功回调有 res 参数, code === 9000 表示付款成功 _my.requestPayment({ ...payMentParam, success: res1 => { co...
微信小程序图片路径怎么写
04-04
微信小程序中的图片路径可以使用相对路径或绝对路径来指定。 相对路径：相对于当前页面的路径，可以使用 "../" 表示上级目录。 例如，如果要在当前页面引用 images 目录下的 picture.png 图片，可以写成： ``` <image src="../../images/picture.png"></image> ``` 绝对路径：以 "/" 开头的路径表示在小程序根目录下的路径。 例如，如果要在小程序根目录下的 images 目录下引用 picture.png 图片，可以写成： ``` <image src="/images/picture.png"></image> ``` 需要注意的是，如果使用了云开发，可以通过云存储访问云端的图片，此时需要使用云存储路径来指定图片路径。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值