微信小程序：使用Vant Weapp的Image组件渲染本地图片时的路径问题

于 2024-10-09 14:00:43 发布
阅读量117 收藏
点赞数 1
文章标签： 微信小程序 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/panghuangang/article/details/142784873
版权

https://vant-ui.github.io/vant-weapp/#/image

加载网络图片，正常：
在这里插入图片描述

使用微信小程序的原生组件image渲染一个本地图片，正常：
在这里插入图片描述

使用相同的本地路径，用van-image渲染本地图片，报错，说找不到路径：
在这里插入图片描述

把本地路径修改下，不使用../,，而是相对于小程序的源码目录来查找，就正常显示了：
在这里插入图片描述

听海边涛声
关注
vant weapp 多选上传图片_微信小程序使用Vant Weapp组件库的方法步骤
weixin_36132709的博客
12-28 911
地址：https://youzan.github.io/vant/#/zh-CN/intro一.引入Vant组件库1.首先运行 npm init就会生成 package.json2.运行npm i vant-weapp -S --production3.安装成功后 点击 工具 => 构建npm之后点击 详情 => 使用构建npm 渲染二.使用组件库首先在json文件中引入组件"van-...
微信小程序结合vant weapp ui实现多图上传组件
qq_41194534的博客
04-27 3646
微信小程序多图上传 最近在写小程序的商品上传，为方便需要使用多张图片的上传的功能。因为小程序不支持数组的多张图片同时上传，然后根据自己的需求创建了一个组件希望能够帮到大家 效果图 创建一个图片上传的promise uploadFilePromise(filePath, Authorization) { return new Promise(function(reso...
在微信小程序里引入Vant Weapp组件库详细步骤
weixin_48674314的博客
12-01 7833
在微信小程序里引入Vant Weapp组件库详细步骤
微信小程序 vant weapp 引用的时候渲染层错误
weixin_46218456的博客
01-20 695
微信小程序bug解决
uni-app+vant-weapp使用vue.js快速开发微信小程序
一梦成回忆
12-31 2111
uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。 此文章主要配合使用vant-weapp，方便习惯使用vue的开发者快速完成微信小程序
微信小程序中使用vant中的Calendar 日历组件
guairena的博客
05-17 9189
需求：   小程序需要实现日历的需求，可以单选、可以选择区间、节假日和周六颜色高亮、返回本月。具体如图，类似猫眼app的日历选择。 思路： 参考市场上含有日历的小程序及app，确定是自己实现还是使用组件，骨朵使用的是Pikaday。 确定使用Vant Weapp组件库中日历。 需要对源码进行一些修改，首先样式的修改、包括顶部周日到周六、节假日及周六日日期的颜色、返回本月按钮的添加及样式。 前后实现了三种展示日历的不同方式 4-1. 第一种，根据官方示例引入日历组件，平铺整个页面。选择日期后会跳转返回列表
微信小程序+vant组件 侧边导航栏切换显示
热门推荐
dmyc1027的博客
05-18 1万+
设计页面时希望效果：左侧侧边导航栏，右侧内容。点击左侧导航栏的不同块，右侧显示不同内容。 采用了vant组件中侧边导航栏van-sidebar，van-sidebar子标签包括多个van-sidebar-item 实现方法： van-sidebar中设置 bind:change="onChange"： <van-sidebar active-key="{{ activeKey }}" bind:change="onChange"> &l
微信小程序：地图获取地点信息及打卡签到、显示范围
一些平时在开发过程中遇到的常见问题，分享给大家
09-16 1428
微信小程序：地图获取地点信息及打卡签到、显示范围
微信小程序开发(第四天)-引入vant插件，引入iconfont，地图页面车辆等按钮优化
梁白开的博客
09-08 1095
将iconfont.css文件改为iconfont.wxss并复制到小程序项目下assets/iconfont文件夹(若没有则新建)中。在需要的页面引用如index页面，index.json中添加以下代码。由于vant组件提供的icon图标不多，按照一位博主引入教程。在index.wxml可以使用iconfont了，如下。借鉴一位博主的保姆级教程，，引入iconfont。
微信小程序实现侧边分类栏
10-16
本篇文章将详细讲解如何使用微信小程序开发工具来创建这样一个功能。 首先，我们需要理解微信小程序的基本结构，它由WXML（结构层）和WXSS（样式层）两部分组成，类似于HTML和CSS，再配合JavaScript进行逻辑处理。...
仿京东微信小程序.zip
04-08
2. **Vant Weapp 组件库**：Vant Weapp 是有赞公司推出的一套微信小程序组件库，源自其移动端 Vue.js 框架 Vant。Vant Weapp 提供了大量的基础和业务组件，如按钮、表格、轮播图等，同时也支持自定义主题，便于...
微信小程序：一个小程序跳转至另一个小程序
snowball的博客
09-30 846
这个 API 接受一个对象参数，其中可以包含目标小程序的 appId、path（目标小程序内的页面路径）、extraData（传递给目标小程序的参数）等。1.1、目标小程序需开放被跳转：目标小程序需要在其 app.json 文件中配置 navigateToMiniProgramAppIdList，将源小程序的 AppID 加入其中。在目标小程序的 app.json 文件中，添加 navigateToMiniProgramAppIdList 字段，并包含源小程序的 AppID。
微信小程序中的 `＜block＞` 元素：高效渲染与结构清晰的利器
everfoot的博客
10-01 1461
总的来说，是否使用<block>取决于具体的应用场景。如果你的循环不需要额外的样式或者DOM结构，那么使用<block>会更加合适。如果循环项需要独立的样式或者事件绑定，那么使用<view>可能会更加合适。通过合理使用<block>，你可以保持WXML结构的清晰和简洁，同时避免不必要的DOM层级和性能开销。在微信小程序的开发中，掌握<block>的用法和优势将帮助你更高效地构建和维护你的应用。
微信小程序常见问题
2301_76246515的博客
10-02 693
app.json 文件内容错误] app.json: 在项目根目录未找到 app.json。
开发微信小程序 基础03
2201_75454657的博客
09-28 965
WXSS
微信小程序 实现下拉刷新功能
最新发布
everfoot的博客
10-08 269
下拉刷新是小程序中一种非常常见的用户交互方式，通过下拉页面，用户可以自动刷新页面以获取最新的内容。这种功能不仅提高了用户体验，还能确保用户总是看到最新的信息。本文将介绍如何在微信小程序中实现下拉刷新功能。
uniapp+Android面向网络学习的时间管理工具软件 微信小程序
我的个人的博客
10-04 2169
用户功能登录注册：用户可以创建账户并登录系统。首页：展示用户的学习概览、专注时间、学习时间、待办信息和目标进度。专注时间：用户可以设置专注学习的时间段。主题查看：用户可以查看和选择不同的学习主题或模块。学习时间：记录和显示用户的学习时间。待办信息：用户可以添加、查看和管理待办事项。目标制定：用户可以设定学习目标，并跟踪其完成情况。防沉迷提醒：设置防沉迷提醒，当用户达到设定的学习时间后，系统会发出提醒。流量统计：统计用户在应用内的数据流量使用情况。
微信小程序 实现上拉加载更多功能：从基础到优化
everfoot的博客
10-08 330
通过以上步骤，我们成功实现了上拉加载更多功能，并进行了加载完毕判断和节流优化。实现这一功能的关键在于监听用户的上拉行为，并在触发时发送请求获取下一页的数据。为了避免用户在上拉加载完毕后仍进行无效操作，我们需要判断数据是否已经加载完，并在加载完毕后给出提示。为了避免在网络较慢的情况下，用户频繁滑动导致的请求浪费，我们需要为上拉加载添加节流功能。函数中，将返回的数据与原有的数据进行合并，并更新到页面的数据中。如果数据已加载完，则更新页面的状态，并给出提示。进行加1操作，并发送请求获取下一页的数据。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值