vue中動態繫結圖片
阿新 • • 發佈:2019-01-04
當img標籤裡的圖片地址是動態變化時,如果圖片不是從後臺獲取,是在assest檔案裡時,要現在data裡初始化其值用require的方式,具體如下:
data () { return { // 導航列表 firstNavList: [{ name: 'Top 15', pathname: '/webapp/worktime/team_attendance', picUrlOn: require('@/assets/img/worktime/top15on.png'), picUrlOff: require('@/assets/img/worktime/top15off.png') }], // 選中worktime worktimeSelect: false }; },
html
<el-menu :default-active="defaultActive" @select="handleSelectMenu" router> <el-menu-item v-for="(item,i) in firstNavList" :key="i" :index="item.pathname"> <img v-if="worktimeSelect === true" :src="item.picUrlOn"> <img v-if="worktimeSelect === false" :src="item.picUrlOff"> </el-menu-item> </el-menu>