webpack 批量引入所有静态图片

1./utils/tool.js 
// 获取静态静态文件所有图片
  export const imageAssets = () => {
    // 静态路径地址
      const req = require.context('@/assets/img/home', true, /\.svg$/);
      const imageMap = new Map();
      req.keys().forEach((key) => {
        const imgName = key.replace(/^\.\/(.*)\.\w+$/, '$1');
        imageMap.set(imgName, { imgName, iconUrl: `${imgName}.svg` });
      });
      return imageMap
  }
  
 2.使用
  <div v-for="(item, index) in allSystem" :key="index">
            <img :src="imgUrl(item)" />
  </div>

<script>
import { imageAssets } from "@/utils/tool";
 export default {
  data() {
    return {
      allSystem: []
    };
  },
  created() {
    this.allSystemIcons = imageAssets();
  },
  mounted() {
    this.managemenSystem();
  },
  computed: {
    imgUrl() {
      return (item) => {
        // 动态渲染拼接图片
        return item.icon ? require(`@/assets/img/home/${item.icon}`) : "";
      };
    },
  },
  methods: {
    managemenSystem() {
      // 数据请求
      request().then((res) => {
        const { code, data, description } = res.data;
        if (code === "000000") {
          // 这里需要跟引入的图片名称保持一致
          const systemRelation = { 
            1: "zonghe", // 综合
            4: "pingfu", //数据门户网站 重复
            6: "permission", //统一权限管理平台
          };
          this.allSystem = data.map((item) => {
            const name = systemRelation[item.id];
            const systemInfo = this.allSystemIcons.get(name);
            item.icon = systemInfo?.iconUrl;
            return item;
          });
        } else {
          this.$Message.error(description);
        }
      });
    },
  },
};
</script>