批量导入本地图片，以动态显示接口数据项的图标

需求：

设备类型的集合有[A,B,C...Z]
可以直接理解为有贼多
对应图标都放在本地的文件夹pic里
现在要根据接口返回的内容，显示有数据的设备类型的图标
可能是[A,C,G]
也可能A到Z全有
不定

分析

1. 设备类型太多，一个个的import对应的图标太麻烦
2. 要显示的图标未知，只能动态显示图片

思路

首先想到的是用new URL,拿到接口数据后动态地组装本地路径

问题是

这个 URL 字符串必须是静态的

那就用静态的路径咯

方案

1. 收集所有设备的集合，然后循环导入

const Facilities=["蓝火加特林","黄金AK"];
const Facility2Img={}

Facilities.forEach((facility)=>{
  Facility2Img[facility]=new URL(`./pic/${facility}.png`, import.meta.url).href
}

问题是：
收集成堆的设备名好麻烦！

2. 直接导入整个图片文件夹，在拿到接口数据后匹配设备类型对应的静态路径

Vite 支持使用特殊的 import.meta.glob 函数从文件系统导入多个模块

// eager一定要加，否则还是动态导入，在本地环境没问题，但生产环境不行
const facilityPics = import.meta.glob("./pic/*.png", { eager: true });

const getPic = (name) => {
  const path = "./pic/" + name + ".png";
  const picModule = facilityPics[path];
  return picModule.default;
};

import { getFacilityData } from "@/apis/gasFacility";

const facilityData = ref([]); //用于在html里v-for显示的数据

async function getData() {
  const res = await getFacilityData({});
  res.forEach((item) => (item.imgSrc = getPic(item.name)));
  facilityData.value = res;
}

OK了家人们！