vite+v3批量一次性引入本地图片(简单做法)

SunFlower9142023-10-13 16:37

效果：

开发步骤：

在assets/fileTypes文件夹中将你需要的png图片导入，并使用文件类型来命名图片(如docx.png)
使用import.meta.globEager将assets/fileTypes下所有的png图片引入
通过遍历Object.keys(files)使用正则匹配出每个图片的名称，用文件类型做name，文件路径做图片路径创建一个数组
在img图标的src定义方法，返回文件路径即可

文件类型图片库：

File Types Icon Pack | Flat | 150 .SVG Icons - Page 3

File Types Icon Pack | Outline Color | 150 .SVG Icons - Page 3

完整代码：

javascript 复制代码

import noneImg from "@/assets/fileTypes/none.png";

<img class="mr5" :src="getImgSrc(file)" />


// 统一获取所有文件类型图片
const fileTypes = ref([]);
const files = import.meta.globEager("@/assets/fileTypes/*.png");
Object.keys(files).forEach((fileName) => {
  let fileType = fileName.match(/([^/]*?)\.[^/.]+$/)[1]; //用正则匹配出文件名称
  fileTypes.value.push({
    name: fileType,
    iconSrc: files[fileName].default,
  });
});

const getImgSrc = (file) => {
  let findImg = noneImg; // 没匹配到就用默认的图片
  fileTypes.value.forEach(
    (item) => item.name === file.attachType && (findImg = item.iconSrc)
  );
  return findImg;
};