1. 程式人生 > >vue中動態繫結圖片

vue中動態繫結圖片

當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>