vite 动态路径引入图片资源

vite Glob 导入

今年 vite 有一个特别好用的功能出现了, 注意的是仅限于 vite 框架

官方链接 : https://cn.vitejs.dev/guide/features.html#glob-import

glob导入 功能点在于能够批量导入你想要的资源, 如果在这个基础上加上 资源变量名 的筛选 就能实现,动态导入了

这里展示一个我批量导入图片的函数

有时候项目需要 根据某些情况更换 页面中固定位置的图片, 但是 vite 本身不支持 url 链接添加变量, 因为 有变量的图片链接无法在 build 时解析, 所以想要控制 url 链接发生改变就只能 import 导入图片,然后 js 控制变量发生改变

图片一多就会显得很繁琐, 都是 import 语句, 当然我也尝试过其他的全局导入, 不是打包有问题, 就是图片限制要放在 public 目录

所以 glob导入 也是解决我这一大痛点的功能, 图片在打包后也不会出现问题

实例

function getStaticFilePath(path) {
  const modules = import.meta.glob("/src/assets/**/*.{png,svg,jpg,jpeg,json}", {
    eager: true,
    import: "default",
  });

  //modules 返回内容, 前面是匹配的变量名, 后面是解析后的正确路径(build后会根据结构改变)
  // {
  //   "/src/assets/images/hot/banner.png": "/src/assets/images/hot/banner.png",
  // }

  path = path.replace(/.*?(\/assets\/)/, "/src$1");
  return modules[path];
}

//使用方式
let imgName = "banner.png";
getStaticFilePath(`../assets/images/hot/${imgName}`); // 结果:/src/assets/images/hot/banner.png

其功能就是批量引入图片资源, 然后我用path变量去匹配图片资源, path变量是可以动态嵌入变量的

这样就可以直接获取到图片等静态资源的正确路径了, 路径可以全路径也可以相对路径, 甚至可以 /assets 开头,

主要是为了 路径插件,开发工具的提示 服务 ,因为在某些工具或插件(vscode,auto import等)在输入 ../ 获取正确路径提示后再嵌入变量会方便很多, 无需自己查看图片结构

注意的是 路径里必须要有 /assets/

注意事项

在 eager: true 情况下, 资源会在第一时间调用, 所以 不要 引入会影响当前环境的资源文件, 比如 js,css 等, 会导致 变量重新初始化, 样式覆盖等一系列问题

如果实在要引 js,css 等文件, 需要把 eager: true 改为 eager: false, 然后 .then 手动加载获取内容

还有 import.meta.glob 的参数 是 不 支持变量或表达式的

结语

glob导入 除了处理 图片等静态文件, 也可以用于组件的批量导入, 功能多多, 不妨回到头部, 看看官方文档吧