解决：微信小程序+Vant——使用van-grid以及van-card图片加载不出来的问题

是光の谢宣骞

已于 2022-04-03 13:54:15 修改

阅读量2.3k

点赞数 1

分类专栏：微信小程序文章标签：微信小程序

于 2022-03-21 20:57:26 首次发布

本文链接：https://blog.csdn.net/qq_45870740/article/details/123645785

版权

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

4 篇文章 0 订阅

订阅专栏

问题

van-grid的icon属性以及van-card的thumb属性的错误写法

<van-grid-item icon="../../icon/fenlei/quanbu.png" text="全部" />

<van-card num="2" tag="热文" desc="描述信息" title="商品标题" thumb="../../icon/fenlei/fushi.png">

图片资源路径

在这里插入图片描述

错误原因

路径不能这样写

解决方法

在这里插入图片描述

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

是光の谢宣骞

关注关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

微信小程序——van-field中的left-icon属性自定义

不迁怒，不贰过。小知识，大智慧。

08-25

4116

**van-field** 输入框控件中的 **left-icon** 属性的自定义怎么实现。

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

dmyc1027的博客

05-21

2925

在使用vant组件制作微信小程序项目时，遇到了图片解析不到的问题。场景如下：在页面中，应用了vant组件库中的van-card,组件中将图片路径传给van-card中的thumb属性，即可在左侧位置显示出图片，目标效果如下：这时遇到了解析不到图片的问题。在card组件中，thumb中传递的图片路径并不是对于本页面的相对位置，而是/miniprogram_npm/@vant/weapp/card的相对位置，从组件目录中解析图片。随后，我在目录某个位置创建了myImage文件夹，并且通过

1 条评论您还未登录，请先登录后发表或查看评论

关于van-card中thumb引入本地图片而无法正常显示的解决方法

ls1850147551的博客

07-29

3307

关于van-card中thumb引入本地图片而无法正常显示的解决方法前言解决办法总结前言最近在弄一个微信公众号，是H5前端，用到的是vant组件。当然Vant的官方文档以及例子都有，但是很多时候并不能满足我们的需求，需要对它进一步开发。 Vant官方文档使用官方的例子 <van-card title="小明" desc="常出现于小学初中作文、英语、数学题、物理题、化学题和笑话中。此名拥有极为悠久的历史内涵，在中国的各种“名著”

van-cascader微信小程序筛选

最新发布

m0_70953528的博客

08-26

250

点击到一级筛选一级内容，点击到二级筛选二级内容。

Vant-image（Vant-Card）加载本地图片失败的问题

zhiliao_aaa的博客

05-20

3559

Vant-image（Vant-Card）加载本地图片失败的问题目录Vant-image（Vant-Card）加载本地图片失败的问题问题描述解决方法总结问题描述当我们使用vant开发小程序并且使用标题里的两种组件时，按照常规的本地图片路径是这样的： <van-card desc="描述信息" title="标题" thumb="../../image/wzq.jpeg" ></van-car

Vant-Card加载本地图片失败的问题

lpfhjw的博客

06-20

635

微信小程序vanUI组件模拟器没问题，真机调试样式错乱

qq_34082921的博客

01-19

1317

微信小程序vanUI组件模拟器没问题，真机调试样式错乱

微信小程序使用 vant Dialog组件的正确方式

10-15

Vant包含了近50个经过实际业务检验的组件，例如 Dialog 组件，它在微信小程序中的使用方法是本文的重点。首先，Vant 的 Dialog 组件是一个弹窗对话框，它可以用于显示警告、确认或输入等操作。在微信小程序中使用 ...

在微信小程序中使用vant的方法

10-16

在微信小程序中，Vant 是一个非常流行的 UI 组件库，它提供了丰富的界面元素和交互设计，可以帮助开发者快速构建美观且易用的小程序应用。Vant 基于 WeApp，专门为微信小程序优化，旨在提供轻量级、高性能的组件。 ...

微信小程序 van-uploadedr 上传图片并压缩组件

03-15

微信小程序 图片压缩、组件、压缩文件大小数量、可配置、压缩质量可配置 <compress-uploader file-list="{{ fileList }}" max-count="6" bind:after-read="afterRead" bind:delete="deleteClick" quality="0.8" /> ...

开发微信小程序犯下的nc错误，使用vant上传图片至云存储显示不出内容

returnChenJia的博客

04-07

1968

最近在参加了学校的小程序比赛，由于是新手，犯了很多弱智错误，如标题，使用vant的upload上传云存储，页面一直渲染不出图片，以下就是一部分解决方法。 1.如果上传云存储后无法在云存储上预览图片，则说明是文件的格式问题。在上传图片后把获取的临时路径加上后缀名字符串.png，这时候去云存储看一下是否可以预览图片，如果可以，那么表示文件没有问题，直接调用即可。 2.第二个问题则是在上传文件的同时还会录入一些信息，提交信息时，数据信息会提交数据库，而文件会上传云存储，而有一些人会使用调用方法，这个时候图片上

vant-image本地图片无法显示

1234Wu--Blog

02-14

7499

坑：正常情况下都是这样写的，但是vant这个框架不知道怎么想的，居然加载不出来，花里胡哨。文档也没有写怎么加载本地图片，到处挖坑。如图：此处省略一万句脏话。 <van-image lazy-load width="34rem" height="8rem" fit="contain" ...

vant使用图片图标时不显示

chuxuezhe__1的博客

09-18

2830

在写项目时遇到了使用vant引用本地图片作为图标时，图标不显示的问题，代码如下： <van-cell-group v-for="(item,index) in list" :key="item.id+'id'"> <van-cell :icon="'../../assets/img'+item.id.slice(0,2)+'.png'"> {{item.goodName}} </van-cell> </van-cell-group> 从浏览器的调试器

vant的grid使用时的问题

热门推荐

chenlim87的博客

08-17

1万+

第一次做移动端的项目使用了vant-ui，在用grid组件的时候出了个bug。当刷新页面或页面发生错误时，九宫格布局会变成下图这样图标突然变小，随便点击一下其它页面就又恢复正常。出现的原因不是太清楚。但是找到了解决方法。把图片放到slot里就可以了。 // 原来的代码 <van-grid-item text="巡察实施" to="/inspection"> <img src="../../assets/巡查实施.svg" alt /> </van-grid-it

关于van-card中desc中描述内容过长而无法正常显示的解决方法

ls1850147551的博客

06-24

1339

关于van-card中desc中描述内容过长而无法正常显示的解决方法前言：解决办法：前言：最近在弄一个微信公众号，是H5前端，用到的是vant组件。当然Vant的官方文档以及例子都有，但是很多时候并不能满足我们的需求，需要对它进一步开发。 Vant官方文档使用官方的例子 <van-card title="小明" desc="常出现于小学初中作文、英语、数学题、物理题、化学题和笑话中。此名拥有极为悠久的历史内涵，在中国的各种“名著”

微信小程序 在使用vant grid时图片出现竖向滚动条

m0_59994452的博客

12-22

633

给图片样式加上一个display：block 就好了

微信小程序修改vant组件样式

蓑笠翁

09-03

3750

微信小程序修改vant组件样式，修改van-grid样式

卡片式van-card使用本地图片

肖肖肖丽珠的博客

10-13

2047

<van-card num="1" price="2.00" :thumb="require('../../assets/images/product.png')" > <template #title> <div class="pricetitle">【成长测兑换卡】</div> ...

vant库如何引用本地图片

dx_zheng的博客

02-22

2986

vantjs组件库，若要引入本地的图片会获取不到。会没有显示图片。 <van-card :title="item.goodsName" :desc="item.spec" :num="item.number" :thumb="getImg()" > <!-- <div slot="num" @click.stop="return false">

微信小程序中vant组件库van-search进入页面自动获取焦点具体代码

04-23

抱歉，我作为AI语言模型并不能直接提供代码，但是我可以为您提供一些思路。可以在 van-search 组件的 mounted 钩子中使用 $nextTick() 方法，将焦点转移到输入框上。具体代码示例： ``` <template> <van-search v-model="keyword" placeholder="搜索" /> </template> <script> export default { data() { return { keyword: '' }; }, mounted() { this.$nextTick(() => { const input = document.querySelector('.van-search__input'); input.focus(); }); } }; </script> ``` 需要注意的是，使用 document.querySelector('.van-search__input') 获取输入框时，可能需要根据实际情况对 class 名进行修改。