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資源了

純屬記錄，僅供參考