vue中动态引入图片地址需要用require

如果icon的地址是相对于项目根目录的路径,
动态引入图片地址时需要添加require()

动态生成menu

javascript 复制代码
            <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
                     :collapse="isCollapse">
                <el-menu-item :index="mindex+1" v-for="(mitem,mindex) in menuList" :key="mindex">
                    <img :src="mitem.icon" alt="">
                    <span slot="title">{{mitem.name}}</span>
                </el-menu-item>
            </el-menu>
javascript 复制代码
menuList:[
    {name:'数据概览',icon:require('@/assets/img/global/menu11.png'),iconActive:require('@/assets/img/global/menu12.png')},
    {name:'数据引接',icon:require('@/assets/img/global/menu11.png'),iconActive:require('@/assets/img/global/menu12.png')},
    {name:'数据检索',icon:require('@/assets/img/global/menu11.png'),iconActive:require('@/assets/img/global/menu12.png')},
    {name:'数据重组',icon:require('@/assets/img/global/menu11.png'),iconActive:require('@/assets/img/global/menu12.png')},
    {name:'系统管理',icon:require('@/assets/img/global/menu11.png'),iconActive:require('@/assets/img/global/menu12.png')},
]
相关推荐
小莫分享17 分钟前
Chrome更新后,扩展不能用问题
前端·chrome
zhangxxxq18 分钟前
前端vue3获取excel二进制流在页面展示
前端·excel
Kiri霧36 分钟前
Kotlin集合分组
android·java·前端·kotlin
拾光拾趣录1 小时前
举一反三:合并 K 个有序链表的最小堆实现
前端·算法
拾光拾趣录1 小时前
合并K个有序链表
前端·算法
江城开朗的豌豆1 小时前
Event Bus:Vue组件间的'广播电台',轻松实现跨组件通信!
前端·javascript·vue.js
袁煦丞1 小时前
7.18实验室 碎片灵感秒同步!memos让笔记追着你跑:cpolar内网穿透第613个成功挑战
前端·程序员·远程工作
江城开朗的豌豆1 小时前
插槽:Vue里的‘占位符’,让组件更灵活!
前端·javascript·vue.js
江城开朗的豌豆1 小时前
$nextTick vs 定时器:Vue的'等一等'和JS的'睡一会'有啥区别?
前端·javascript·vue.js
三月的一天1 小时前
用 React-Three-Fiber 实现雪花下落与堆积效果:从零开始的 3D 雪景模拟
前端·react.js·前端框架