vue3 vite动态拼接图片路径

小和尚敲木头2026-06-11 20:26

javascript 复制代码

// 1. 在文件顶部预先加载 assets 目录下所有 jpg 和 png 图片的映射表
// eager: true 表示同步加载，直接获取模块对象
const imageModules = import.meta.glob('../assets/**/*.{jpg,jpeg,png,JPG,PNG}', { eager: true });

/**
 * 获取通用静态资源（保持你原有的逻辑，因为路径结构是固定的）
 */
export function getAssetsFile(url) {
  return new URL(`../assets/${url}`, import.meta.url).href;
}

/**
 * 根据文件名和分类动态获取草药图片
 */
export function getHerbImage(filename, category) {
  if (!filename) return '';
  
  // 2. 拼接出相对于当前文件的预期路径
  const dir = category === '矿物药' ? 'images/minerals/' : 'images/plants/';
  const expectedPath = `../assets/${dir}${filename}`;
  
  // 3. 从预加载的映射表中获取图片 URL
  if (imageModules[expectedPath]) {
    return imageModules[expectedPath].default;
  }
  
  // 4. 找不到图片时的兜底处理（方便排查问题）
  console.warn(`[getHerbImage] 图片未找到: ${expectedPath}`);
  return ''; 
}

/**
 * 批量获取草药图片（处理逗号分隔的字符串）
 */
export function getHerbImages(filenames, category) {
  if (!filenames) return [];
  return filenames
    .split(',')
    .map((f) => f.trim())
    .filter(Boolean)
    .map((f) => getHerbImage(f, category));
}

全局映射表：import.meta.glob('.../assets/**/*.{jpg,jpeg,png,JPG,PNG}', { eager: true }) 会在 Vite 构建时扫描该目录，生成一个包含所有匹配文件路径的对象。

路径匹配：expectedPath 必须与 glob 生成的 key 完全一致。由于 index.js 在 src/utils/ 下，所以相对路径必须以 .../assets/ 开头。

获取真实 URL：因为使用了 { eager: true }，所以图片的真实 URL 存储在 imageModules $expectedPath$ .default 中。

容错处理：增加了 console.warn，如果以后不小心传错了文件名，控制台会直接告诉你哪个路径没匹配上，避免再次出现 undefined 或空白图片。