vue中循环本地图片资源

在工作中常常有这个需求就是特别是类似管理系统的左侧菜单，自定义一些图片的时候，需要渲染本地的img资源

 

 这些图片资源往往是放在本地的assets/images下的，如果成功渲染除这些资源呢，我的做法是

第一步，在utils下新建一个menu.ts文件，然后在里面配置我的菜单

let MenuList: any = [
    {
        id: 'area',
        name: '菜单1',
        active: false,
        icon: 'menu01.png'
    },
    {
        id: 'person-position',
        name: '菜单2',
        active: false,
        icon: 'menu02.png'
    },
    {
        id: 'fence',
        name: '菜单3',
        active: false,
        icon: 'menu03.png'
    },
    {
        id: 'vehicle-position',
        name: '菜单4',
        active: false,
        icon: 'menu04.png'
    }
'

然后渲染菜单的sider组件中的created或者是mounted生命周期中require图片资源

created() {
    this.ownMenuList = storage.get("menus") || [];
    MenuList.forEach((value: any) => {
      value.img = require("@/assets/images/" + value.icon)
    });
  }

然后再template中就可以正常渲染出img资源了

纯属记录，仅供参考