vue中动态绑定图片

最新推荐文章于 2024-08-04 21:17:54 发布

liangxhblog

最新推荐文章于 2024-08-04 21:17:54 发布

阅读量7.9k

点赞数

文章标签： vue 动态图片 require img

本文链接：https://blog.csdn.net/liangxhblog/article/details/80632766

版权

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