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')},
]
相关推荐
花归去16 分钟前
echarts 柱状图曲线图
开发语言·前端·javascript
喝拿铁写前端16 分钟前
当 AI 会写代码之后,我们应该怎么“管”它?
前端·人工智能
老前端的功夫20 分钟前
TypeScript 类型魔术:模板字面量类型的深层解密与工程实践
前端·javascript·ubuntu·架构·typescript·前端框架
北辰alk29 分钟前
Vue Router 404页面配置:从基础到高级的完整指南
vue.js
北辰alk33 分钟前
Vue 中的 MVVM、MVC 和 MVP:现代前端架构模式深度解析
vue.js
北辰alk37 分钟前
为什么 Vue 中的 data 必须是一个函数?深度解析与实战指南
vue.js
北辰alk38 分钟前
Vue 的 <template> 标签:不仅仅是包裹容器
vue.js
Nan_Shu_61444 分钟前
学习: Threejs (2)
前端·javascript·学习
北辰alk1 小时前
为什么不建议在 Vue 中同时使用 v-if 和 v-for?深度解析与最佳实践
vue.js
北辰alk1 小时前
Vue 模板中保留 HTML 注释的完整指南
vue.js