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");
},