动态绑定图片路径需让构建工具识别资源：Webpack/Vite项目禁用字符串拼接，Vue2/Vue3 Webpack用require(@/assets/${name}.ext)；Vite推荐new URL(../assets/${name}.ext, import.meta.url).href；public目录可直接写/src，但无构建优化；须加@error兜底。
Vue模板里动态绑定图片路径，最常见报错是“404”或“Failed to load resource”，根本原因不是写法错了，而是构建工具（Webpack/Vite）没把图片当成模块处理。关键在于：**不能直接拼字符串路径，必须让打包器提前识别并解析图片资源**。
require() 是最稳妥的动态路径方案
适用于 Vue2 和 Vue3（尤其 Webpack 项目），要求路径在构建时可静态分析：
- 路径必须用模板字符串 + require() 包裹，比如
:src="require(`@/assets/icons/${iconName}.svg`)" - 路径前缀要完整，@/assets/ 不能漏，也不能写成
./assets/或../assets/ - 变量部分（如
iconName）只能是已知文件名，不能是运行时才确定的任意字符串（比如用户输入） - 支持的后缀需在 webpack 配置中被 loader 处理，常见如 .png、.jpg、.svg、.webp
public 目录适合纯静态动态路径
如果图片不参与构建、路径固定且无需哈希命名，放 public/ 目录最简单：
Element Plus UI Vue3
下载
Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。
- 把图片放进
public/images/avatar-1.png，模板中直接写:src="`/images/avatar-${id}.png`" - 不用 require，不走模块系统，部署后路径就是
/images/avatar-123.png - 缺点是无法利用 webpack 的图片压缩、转 base64、自动哈希等优化能力
- 注意：不要加 public/ 前缀，
src="/public/xxx"是错误写法
Vite 项目推荐 import.meta.url + new URL
Vue3 + Vite 环境下更现代、类型友好：
立即学习“前端免费学习笔记（深入）”；
- 在 script setup 中用
const img = new URL(`../assets/${name}.jpg`, import.meta.url).href - 或配合 computed 使用：
computed(() => new URL(`../assets/${props.src}`, import.meta.url).href) - 优势是支持相对路径、TS 类型推导、Vite 原生支持，且不依赖 require 全局函数
- 不适用于 Vue2 或 Webpack 项目
图片加载失败时要有兜底处理
即使路径正确，网络或资源问题也可能导致图片空白：
- 加
@error事件监听，切换默认图：<img :src="userAvatar" alt="Vue模板语法中如何处理动态图片路径？解决图片不显示的报错指南" > - 在方法中重赋值：
onImageError() { this.userAvatar = require('@/assets/images/default-avatar.png'); } - 也可用 CSS fallback，比如设置 background-image + background-color 防止白屏
