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

最新推荐文章于 2026-06-10 11:47:10 发布

原创最新推荐文章于 2026-06-10 11:47:10 发布 · 3.2k 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#微信小程序 #小程序 #npm

微信小程序专栏收录该内容

5 篇文章

订阅专栏

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

在使用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>