微信小程序 + vant组件van-card 图片解析不到

在微信小程序开发中使用vant组件库时,遇到图片在van-card组件中无法正确解析的问题。错误源于图片路径的解析方式。问题在于图片文件夹的位置,只有在‘weapp’路径下创建的图片文件夹才能被正确解析。当图片文件夹位于‘weapp’路径之外时,会导致解析失败。解决方法是确保图片资源放在正确的路径下,例如‘myImage’文件夹需要放在‘weapp’路径内。
摘要由CSDN通过智能技术生成

在使用vant组件制作微信小程序项目时,遇到了图片解析不到的问题。

场景如下:

在页面中,应用了vant组件库中的van-card,组件中将图片路径传给van-card中的thumb属性,即可在左侧位置显示出图片,目标效果如下:

这时遇到了解析不到图片的问题。

在card组件中,thumb中传递的图片路径并不是对于本页面的相对位置,而是/miniprogram_npm/@vant/weapp/card的相对位置,从组件目录中解析图片。

随后,我在目录某个位置创建了myImage文件夹,并且通过正确的图片路径找到图片进行解析,但却出现了以下报错(图片路径已经多次检查,无误)

经过多层尝试,最终发现了问题:

当创建的图片文件夹在weapp路径以下时,图片可以成功解析。

但是当创建的图片文件夹在weapp路径以外时,图片解析会发生上图所示报错。

最后附录van-card的部分,成功运行显示的代码:

js部分:

data: {
    activeKey:0,
    goods:[
      {
        id:"0",
        price:"5.6元/斤",
        tag:"热销",
        title:"农家大橘子",
        image:"../myImage/orange.webp",
        value:"5"
      },
      {
        id:"1",
        price:"6.6元/斤",
        tag:"新品",
        title:"农家大香蕉",
        image:"../myImage/banana.webp",
        value:"4"
      }
    ]
  },

wxml部分:

<van-card wx:for="{{goods}}" 
                        wx:for-item = "t" 
                        wx:key="key" 
                        custom-class="cardClass" 
                        title-class="titleClass" 
                        price-class="priceClass"
                        price="{{t.price}}"
                        tag="{{t.tag}}"
                        title="{{t.title}}"
                        thumb="{{t.image}}"
                        data-value="{{t.id}}"
                        bindtap="toMessage"
                    >
 </van-card>

  • 3
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序中使用 Vant 组件库的侧边导航栏滚动,需要首先在项目中引入 Vant 组件库,并且按照 Vant 的文档进行组件的配置和使用。 首先,在项目根目录下的 `app.json` 文件中配置 Vant 组件的全局样式,示例如下: ```json { "style": "vant-weapp/dist/common/index" } ``` 然后在需要使用侧边导航栏滚动的页面中引入 Vant 的侧边导航栏组件,并按照需求设置好相关属性和事件,示例如下: ```html <van-sidebar show="{{ true }}" width="200rpx" :style="height: 100vh;"> <van-sidebar-item v-for="(item, index) in menuList" :key="index" :title="item.title" :dot="item.dot" :badge="item.badge" /> </van-sidebar> ``` 其中,`show` 属性用于控制侧边导航栏的显示与隐藏,`width` 属性用于设置导航栏的宽度,`:style` 属性用于设置导航栏的高度为可视区域的高度。 此外,需要根据实际需求在 `data` 数据中定义 `menuList` 数组,并为每个侧边导航栏项设置相应的标题、角标和小红点。 最后,在页面的生命周期函数中,通过监听滚动事件来实现侧边导航栏的滚动效果,示例如下: ```javascript Page({ onScroll: function(event) { // 根据滚动位置处理侧边导航栏的样式 } }) ``` 在监听滚动事件中,可以根据滚动位置来处理侧边导航栏的样式,例如高亮当前正在滚动的导航项。 总结起来,要在微信小程序中使用 Vant 组件库的侧边导航栏滚动,需要首先引入 Vant 组件库并进行配置,然后在页面中按照需求引入侧边导航栏组件并设置相应的属性和事件,最后在监听滚动事件中处理导航栏的样式即可。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值