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

效果:

开发步骤:

  • 在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;
};
相关推荐
FogLetter6 分钟前
从原生JS事件到React事件机制:深入理解前端事件处理
前端·javascript·react.js
轻语呢喃8 分钟前
js事件机制:监听、捕获、冒泡与委托
javascript
小公主18 分钟前
如何利用闭包封装私有变量?掌握防抖、节流与 this 问题的巧妙解决方案
前端
烛阴22 分钟前
JavaScript 的动态魔法:使用 constructor 动态创建函数
前端·javascript
前端 贾公子33 分钟前
tailwind ( uni ) === 自定义主题
前端
独立开阀者_FwtCoder41 分钟前
大制作!在线 CSS 动效 编辑神器!太炫酷了!
前端·javascript·github
白白李媛媛42 分钟前
vue3中实现echarts打印功能
前端·vue.js·echarts
一只卡比兽43 分钟前
全栈Node.js开发:集成第三方AI提供商Token的完整指南
javascript
尘心cx44 分钟前
前端-HTML-day2
前端·html
歘chua1 小时前
组件封装:封装一个可复用的crud界面的思路
前端