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 分钟前
AI Agent 介绍
前端·人工智能·后端
徐同保21 分钟前
使用n8n自动发邮件
前端
dly_blog1 小时前
setup 函数完整指南!
前端·javascript·vue.js
霍理迪1 小时前
基础CSS语法
前端·css
粟悟饭&龟波功1 小时前
【GitHub热门项目精选】(2025-12-19)
前端·人工智能·后端·github
流浪法师122 小时前
MyPhishing-Web:AI 驱动的钓鱼邮件检测可视化平台
前端·人工智能
写代码的jiang2 小时前
【无标题】实战:Vue3 + Element Plus 实现树形选择器全量预加载与层级控制
前端·javascript·vue.js
晚烛2 小时前
实战前瞻:构建高可靠、低延迟的 Flutter + OpenHarmony 智慧交通出行平台
前端·javascript·flutter
WHOVENLY2 小时前
【javaScript】- 作用域[[scope]]
前端·javascript
来杯三花豆奶2 小时前
Vue3 Pinia 从入门到精通
前端·javascript·vue.js