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')},
]
相关推荐
Dwzun3 分钟前
基于SpringBoot+Vue的体重管理系统【附源码+文档+部署视频+讲解)
vue.js·spring boot·后端
元直数字电路验证10 分钟前
Jakarta EE Web 聊天室技术梳理
前端
wadesir13 分钟前
Nginx配置文件CPU优化(从零开始提升Web服务器性能)
服务器·前端·nginx
牧码岛13 分钟前
Web前端之canvas实现图片融合与清晰度介绍、合并
前端·javascript·css·html·web·canvas·web前端
灵犀坠15 分钟前
前端面试八股复习心得
开发语言·前端·javascript
9***Y4817 分钟前
前端动画性能优化
前端
网络点点滴18 分钟前
Vue3嵌套路由
前端·javascript·vue.js
牧码岛29 分钟前
Web前端之Vue+Element打印时输入值没有及时更新dom的问题
前端·javascript·html·web·web前端
小二李36 分钟前
第8章 Node框架实战篇 - 文件上传与管理
前端·javascript·数据库
HIT_Weston1 小时前
45、【Ubuntu】【Gitlab】拉出内网 Web 服务:http.server 分析(二)
前端·http·gitlab