vue项目动态绑定img标签的资源地址(基于项目的地址)
<v-list v-show="!show"> <v-list-item-group v-model="model"> <v-list-item v-for="(item, i) in items" :key="i" > <v-list-item-icon class="ma-0 py-2"> <!-- <v-icon v-text="item.icon"></v-icon> --> <img :src="item.src" width="50px" alt="" /> <!-- <div class="img-box"></div> --> </v-list-item-icon> <v-list-item-content> <v-list-item-title class="pl-2"> <span class="pr-1">{{ item.text }}:</span> <span>{{ item.value }}</span> </v-list-item-title> </v-list-item-content> </v-list-item> </v-list-item-group> </v-list>
data() { return { show: true, items: [ { icon: 'mdi-inbox', text: '今日涉属地信息量', src: require('../../../assets/images/index_today.png'), value: '21' }, { icon: 'mdi-star', text: '今日全国热点总量', src: require('../../../assets/images/index_special.png'), value: '21' }, { icon: 'mdi-send', text: '今日涉属地热点信息量', src: require('../../../assets/images/index_hot.png'), value: '21' }, { icon: 'mdi-email-open', text: '今日涉属地舆情信息量', src: require('../../../assets/images/index_terr.png'), value: '21' } ], model: 1 }; },
解决办法:在数据data里面的变量绑定添加 require()就可以