需求

        菜单icon是通过后台获取的，但图片本身存在前端，后台返回的数据是图片名称。

问题

        直接使用require(‘路径名’+图片名+’.png’)报错：

解决思路

        使用require.context找到图片相关信息，名称和路径等，然后把名称和后台传过来的图片名称比较，相同的就把对应的图片路径赋值。

关键代码

const path = require("path");
const icons = require.context("@assets/img/home/system", false, /\.png$/);  // 获取@assets/img/home/system文件夹下（不包括子文件夹）所有的png文件，这里是一个webpackContext对象
this.$api.help1.menu().then(res => {
  if (res.code === 2000) {
    let data = res.data;
    data.menu.forEach(item => {
      let iconItem;
      let activeIconItem;
      icons.keys().forEach(key => {  // 遍历找到的png文件
        const name = path.basename(key, ".png");  // 获取图片名称
        if (name === item.icon) {
          iconItem = icons(key).default || icons(key);  // 这里webpack已经帮我们把图片资源编译成了base64文件，这里的iconItem实际上是一串base64信息
        }
        if (name === item.active_icon) {
          activeIconItem = icons(key).default || icons(key);
        }
      });
      let menuItem = {
        id: item.url,
        icon: iconItem,
        active_icon: activeIconItem,
        name: item.title,
        path: item.url,
        children: []
      };
      this.menuList.push(menuItem);
    });
  } else {
    this.$message({
      message: res.msg,
      type: "warning"
    });
  }
});

效果图

参考文档：
依赖管理 | webpack 中文文档