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')},
]
相关推荐
子兮曰3 分钟前
深入浏览器指纹:Canvas、WebGL、Audio是如何暴露你的身份的?
前端·浏览器·canvas
月亮补丁5 分钟前
AntiGravity只能生成 1:1 图片?一招破解尺寸限制
前端
何中应9 分钟前
MindMap部署
前端·node.js
boooooooom10 分钟前
Pinia必学4大核心API:$patch/$reset/$subscribe/$onAction,用法封神!
javascript·vue.js·面试
NAGNIP12 分钟前
程序员效率翻倍的快捷键大全!
前端·后端·程序员
wxin_VXbishe12 分钟前
C#(asp.net)学员竞赛信息管理系统-计算机毕业设计源码28790
java·vue.js·spring boot·spring·django·c#·php
一个网络学徒16 分钟前
python5
java·服务器·前端
tiantian_cool16 分钟前
Claude Opus 4.6 模型新特性(2026年2月5日发布)
前端
0思必得021 分钟前
[Web自动化] Selenium获取元素的子元素
前端·爬虫·selenium·自动化·web自动化
不会敲代码124 分钟前
解密JavaScript内存机制:从执行上下文到闭包的全景解析
javascript