在 Vite 项目中使用 new URL(..., import.meta.url) 动态构造图片路径时，若图片位于 /src/assets/images/，直接基于当前模块的 import.meta.url 计算会导致路径错误（如出现 undefined），应改用以页面根域为基准的绝对路径构造方式。

在 vite 项目中使用 `new url(..., import.meta.url)` 动态构造图片路径时，若图片位于 `/src/assets/images/`，直接基于当前模块的 `import.meta.url` 计算会导致路径错误（如出现 `undefined`），应改用以页面根域为基准的绝对路径构造方式。

Vite 的 import.meta.url 指向当前模块文件的 URL（例如 http://localhost:5173/src/components/ProjectDisplay.vue），因此 new URL('./assets/images/placeholder.jpg', import.meta.url) 实际解析为相对于该 .vue 文件所在目录的路径——即 src/components/assets/images/placeholder.jpg，而非你期望的 src/assets/images/placeholder.jpg。这正是 DevTools 中看到 .../undefined（本质是路径解析失败或资源未命中）的根本原因。

✅ 正确做法：避免依赖模块相对路径，改用运行时根路径定位资源
由于 Vite 在开发环境下将 /src 映射为服务器根路径（通过 vite.config.ts 中默认的 base: '/'），且所有静态资源最终由开发服务器托管，最可靠的方式是构造以 window.location.origin 为基址的绝对 URL：

const getImgUrl = (img: string) => {
  return new URL(`/src/assets/images/${img}`, window.location.origin).href;
};

⚠️ 注意事项：

• 此方式仅适用于开发环境（localhost:5173）及未配置自定义 base 的生产部署。若生产环境部署在子路径（如 /my-app/），需同步更新 vite.config.ts 的 base 配置，并在 getImgUrl 中使用 import.meta.env.BASE_URL 替代 window.location.origin，以确保路径一致性：

  const getImgUrl = (img: string) => {
    return new URL(`/src/assets/images/${img}`, import.meta.env.BASE_URL).href;
  };

• 更推荐的 Vite 原生方案是预导入图像模块（适用于已知图像列表）或使用 import() 动态导入（需配合 public/ 目录或正确配置别名）。但对于 JSON 驱动的动态图像名，上述 URL 构造法简洁有效。
• 确保图片真实存在于 src/assets/images/ 下，且文件名大小写、扩展名完全匹配（如 placeholder.jpg ≠ Placeholder.JPG）。

总结：import.meta.url 是模块级上下文，不适用于跨目录资源定位；动态图片加载应优先采用运行时可确定的根路径策略，兼顾开发与部署一致性。