vue之img标签:src地址拼接 --随记

背景:图片为本地资源,根据后台返回的icon(图片名字/标记)匹配本地图片。

代码:(假数据)


<template>
    <div>
        <ul class="gift_main_list" v-if="tabIndex == 1">
          <li class="list_item" v-for="(item,index) in giftList" 
             v-if="item.type == 0" 
             :class="itemActive == item.id ? 'active' : ''"
             @click="giftChange(item)"
             :key="index">
             <i><img :src="getImgUrl(item.icon)"></i>
             <span>{{item.name}}</span>
          </li>
        </ul>
    </div>
</template>
data () {
        return {
            giftList:[
                { id : 1 ,type : 0 ,price : 170 ,icon : 'tv1' ,name : 'vip/年'},
                { id : 2 ,type : 0 ,price : 160 ,icon : 'tv2' ,name : 'vip/年'},
                { id : 3 ,type : 1 ,price : 150 ,icon : 'tv3' ,name : 'vip/年'},
                { id : 4 ,type : 1 ,price : 140 ,icon : 'tv4' ,name : 'vip/年'},
                { id : 5 ,type : 1 ,price : 130 ,icon : 'tv5' ,name : 'vip/年'},
            ],
        }
    },
//获取图片地址
getImgUrl(icon){
   return require("@/assets/images/tvlogo/"+icon+".png");
},

 

  • 2
    点赞
  • 21
    收藏
    觉得还不错? 一键收藏
  • 14
    评论
评论 14
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值