Menu 的 icon 是 UI 提供的图片而不是组件怎么办？

Menu 的 icon 为本地图片，选中不同的 Menu 项通过切换路径展示 未选中/已选中 的icon图片

功能依赖：vue2 + element-ui

        <el-menu
          :default-active="$route.path"
          router
          active-text-color="white"
          @select="handleSelect"
        >
          <el-submenu index="1" class="my-active item1">
            <template slot="title"
              ><img src="../assets/default/property.png" alt="" />
              UZI跳枪课程</template
            >
            <el-menu-item
              index="/"
              ><img :src="getIcon('/')" alt="" /> 大香蕉一条大香蕉</el-menu-item
            >
            <el-menu-item index="/asset-hole"
              ><img :src="getIcon('/asset-hole')" alt="" />
              你的感觉真的很奇妙</el-menu-item
            >
          </el-submenu>
          <el-submenu index="2" class="my-active item2">
            <template slot="title"
              ><img
                src="../assets/default/monitor.png"
                alt=""
              />不是你配吗老弟</template
            >
            <el-menu-item index="/alarm-events"
              ><img
                :src="getIcon('/alarm-events')"
                alt=""
              />我的头发</el-menu-item
            >
          </el-submenu>
          <el-submenu index="3" class="my-active item3">
            <template slot="title"
              ><img src="../assets/default/net.png" alt="" />是真发</template
            >
            <el-menu-item index="/fraud-discovery"
              ><img :src="getIcon('/fraud-discovery')" alt="">你好你好</el-menu-item
            >
            <el-menu-item index="/behavior-logs"
              ><img
                :src="getIcon('/behavior-logs')"
                alt=""
              />好奶啊是弟弟吧</el-menu-item
            >
          </el-submenu>
          <el-submenu index="4" class="my-active item4">
            <template slot="title"
              ><img
                src="../assets/default/log.png"
                alt=""
              />吃口猪头肉</template
            >
            <el-menu-item index="/traffic-log"
              ><img
                :src="getIcon('/traffic-log')"
                alt=""
              />鸿运当头666</el-menu-item
            >
          </el-submenu>
          <el-submenu index="5" class="my-active item5">
            <template slot="title"
              ><img
                src="../assets/default/doctor.png"
                alt=""
              />黄花梨~</template
            >
            <el-menu-item index="/figure-examine-view"
              ><img
                :src="getIcon('/figure-examine-view')"
                alt=""
              />你又来辽~</el-menu-item
            >
          </el-submenu>
        </el-menu>

export default {
  data() {
    return {
      iconMap: {
        "/": "default/property.png",
        "/asset-overview": "default/property.png",
        "/asset-hole": "default/property.png",
        "/assets-fall": "default/property.png",

        "/monitoring-overview": "default/monitor.png",
        "/alarm-events": "default/monitor.png",
        "/successful-attack": "default/monitor.png",

        "/fraud-discovery": "default/net.png",
        "/risk-behavior": "default/net.png",
        "/behavior-logs": "default/net.png",

        "/traffic-statistics": "default/log.png",
        "/traffic-log": "default/log.png",

        "/figure-examine-view": "default/doctor.png",
      },
      // 当前激活的图标路径
      activeIcon: "", // 闲置字段 根据需求是否需要
    };
  },
  // 闲置功能 根据需求是否需要
  "$route.path"(newVal) {
    // 监听路由变化，更新激活的图标
    this.activeIcon = this.iconMap[newVal] || "";
  },
  mounted() {
    // 获取浏览器地址栏中的hahs值
    let hash = window.location.hash.slice(1);
    // 例如将 default/property.png 按照 / 分割后只取 property.png 图片名称 
    let imgName = this.iconMap[hash].split("/")[1];
    
    // 文章底部附目录结构
    // src/assets/active  该路径文件下放的 已选后 该展示的图片
    // src/assets/default 该路径文件下放的 未选时 该展示的图片
    // src/assets/hover 该路径文件下放的 悬浮时 该展示的图片(根据需要可以监听hover事件切换图片地址)
    
    // 将对应的展示图片路径切换为已选中的图片路径
    this.iconMap[hash] = `active/${imgName}`;
  },

  methods: {
    // menu 的 select 事件
    handleSelect(index, indexPath) {
      // 例如选中 /alarm-events 该页面
      console.log(index) // /alarm-events
      console.log(indexPath) // ['2', '/alarm-events'] 数组中的 2 是当前 submenu 的 index
      // 无论点击那个选项 先还原未选中时的图片地址
      this.iconMap = {
        "/": "default/property.png",
        "/asset-overview": "default/property.png",
        "/asset-hole": "default/property.png",
        "/assets-fall": "default/property.png",

        "/monitoring-overview": "default/monitor.png",
        "/alarm-events": "default/monitor.png",
        "/successful-attack": "default/monitor.png",

        "/fraud-discovery": "default/net.png",
        "/risk-behavior": "default/net.png",
        "/behavior-logs": "default/net.png",

        "/traffic-statistics": "default/log.png",
        "/traffic-log": "default/log.png",

        "/figure-examine-view": "default/doctor.png",
      };
      // 根据 index 判断 menu-item 该展示的图片名称 active 就是选中后的图片所在的文件夹名称
      if (indexPath[0] == 1) {
        // index 为 hash 值，找到 this.iconMap 中对应的键切换图片文件夹名称和图片名称
        this.iconMap[index] = "active/property.png";
      }
      if (indexPath[0] == 2) {
        this.iconMap[index] = "active/monitor.png";
      }
      if (indexPath[0] == 3) {
        this.iconMap[index] = "active/net.png";
      }
      if (indexPath[0] == 4) {
        this.iconMap[index] = "active/log.png";
      }
      if (indexPath[0] == 5) {
        this.iconMap[index] = "active/doctor.png";
      }
    },
    // 该方法展示默认显示的 icon 图
    getIcon(path) {
      // 根据路径返回对应的图标路径
      return require("@/assets/" + this.iconMap[path]) || "";
    },
  },
};