Vue模板中动态绑定图片路径需用require()（Vue2/Webpack）或new URL()（Vue3/Vite），否则因构建工具无法静态分析导致404；变量名须为确定值，不可为用户输入；推荐预定义映射对象提升安全性和可维护性。

在 Vue 模板中直接用 v-bind:src 绑定形如 "./assets/logo.png" 的相对路径，浏览器会报 404 —— 因为 Webpack/Vite 在构建时无法静态分析字符串拼接或变量路径，导致资源未被正确解析和打包。

使用 require() 手动引入（Vue 2 + Webpack）

Webpack 环境下，require() 是一个编译期函数，能触发资源处理流程。动态路径必须通过它显式声明依赖：

• ✅ 正确写法（字符串模板 + require）：
  
• ⚠️ 注意：imageName 必须是确定的变量（如 data 或 computed），不能是用户输入或异步获取的不可信值，否则构建时报错
• ❌ 错误写法：
  （纯字符串拼接，不触发资源处理）

使用 new URL()（Vue 3 + Vite 推荐）

Vite 原生支持 new URL('./xxx', import.meta.url)，这是标准、安全、类型友好的方式：

Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

下载

• ✅ 正确写法：
  
• ✅ 支持 TS 类型推导（配合 import.meta.glob 可进一步做路径校验）
• ✅ 构建时自动转为哈希文件名，支持缓存优化
• ⚠️ 注意：import.meta.url 必须存在（即不能在非模块脚本中使用），且路径需相对于当前文件

预加载所有可能图片（适合有限固定选项）

若图片名来自枚举或少量确定值，可提前统一导入，避免运行时解析风险：

• 在 script 中定义映射对象：
  

  const imageMap = {<br>
      logo: new URL('./assets/logo.png', import.meta.url).href,<br>
      avatar: new URL('./assets/avatar.jpg', import.meta.url).href<br>
  };

• 模板中直接使用：
  
• 优势：无运行时错误、IDE 可跳转、构建期校验路径有效性

常见报错与排查要点

“Failed to resolve import”：路径写错或文件不存在，检查是否拼写正确、大小写匹配、扩展名完整；
“Cannot find module”（TS 报错）：确保 declare module '*.png' 已在 shims-vue.d.ts 中声明；
图片显示空白但无报错：检查浏览器 Network 面板，确认请求地址是否为 404 或返回 HTML（说明路径被当作路由处理了）；
动态路径含变量但构建失败：Webpack 不支持表达式中含非常量部分（如 require('./' + name)），Vite 的 new URL() 同样要求路径参数是静态可分析的字符串模板。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！