在 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 无法定位该相对路径下的资源，最终 fallback 到无效地址。
✅ 正确做法是脱离模块上下文，从项目静态资源的逻辑位置出发构建 URL。由于 /src/assets/images/ 下的图片在开发时会被 Vite 自动托管为根路径下的静态资源（如 /src/assets/images/placeholder.jpg 可通过 http://localhost:5173/src/assets/images/placeholder.jpg 直接访问），推荐使用以下安全且跨环境兼容的方式：
const getImgUrl = (img: string) => {
// ✅ 基于浏览器当前 origin + 明确的项目内路径
return new URL(`/src/assets/images/${img}`, window.location.origin).href;
};
⚠️ 注意事项：
- 此方式依赖
window.location.origin，仅适用于浏览器环境（不适用于 SSR）； - 确保图片真实存放于
src/assets/images/目录下，且文件名严格匹配 JSON 中的字段（注意大小写与扩展名）； -
不要在
vite.config.ts中配置base: './src'—— 这会破坏 Vite 默认的静态资源服务规则，反而导致资源 404；Vite 默认base: '/'已足够，/src/是源码路径，不是运行时 URL 前缀； - 若需 SSR 兼容或更健壮的方案，建议将图片移至
public/目录（如public/images/placeholder.jpg），然后直接使用/images/placeholder.jpg——public下资源不经过构建处理，路径恒定、零配置。
? 总结：动态导入图片的本质不是“编译时 resolve”，而是“运行时拼接可访问的静态 URL”。优先利用 Vite 对 src/assets 的自动哈希与托管能力，但路径构造必须与实际服务结构对齐——以 window.location.origin 为基准，显式写出资源在开发服务器中的完整路径，是最清晰、可靠且无需额外配置的实践方式。
