vue專案動態繫結img標籤的資源地址(基於專案的地址)
阿新 • • 發佈:2020-08-12
<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()就可以