vant Grid组件图片加载问题无法加载本地图片解决方案

最新推荐文章于 2024-02-23 14:31:38 发布

小邱程序员

最新推荐文章于 2024-02-23 14:31:38 发布

阅读量1.3k

点赞数

文章标签： servlet mybatis 前端 javascript vue.js

本文链接：https://blog.csdn.net/m0_62876802/article/details/125928749

版权

我们引入图片直接用官网给的icon来加载案图片
在这里插入图片描述

<van-grid square>
      <van-grid-item 
            v-for="(item,index) in gridtextlist" 
            :key="index"
            :text="item.text"
            :icon="item.photo"
      />
      {{item}}
    </van-grid>

然后我们图片地址得用require包一下

gridtextlist:[
            {
                text:"女性专区",
                icon:"n",
                photo:require('../assets/cyimages/images/1indexjg1_05.png')
            },
            {
                text: "无醇",
                icon:"w",
                photo:require('../assets/cyimages/images/1indexjg2_05.png')
            },
            {
                text:"聚会畅想",
                icon:"j",
                photo:require('../assets/cyimages/images/1indexjg3_05.png')
            },
            {
                text:"关于爱情",
                icon:"g",
                photo:require('../assets/cyimages/images/1indexjg4_05.png')
            },
            {
                text:"火锅绝配",
                icon:"h",
                photo:require('../assets/cyimages/images/1indexjg5_05.png')
            },
            {
                text:"套餐推荐",
                icon:"template",
                photo:require('../assets/cyimages/images/1indexjg6_05.png')
            },
            {
                text:"送礼服务",
                icon:"scoped",
                photo:require('../assets/cyimages/images/1indexjg7_05.png')
            },
            {
                text:"侍酒专区",
                icon:"sh",
                photo:require('../assets/cyimages/images/1indexjg8_05.png')
            },   
        ]