在 Vue 项目中，当动态绑定 img 标签的 src 属性时，发现图片无法加载或仍然显示旧图，可能的原因有哪些？请给出具体的排查思路和对应的解决方案。
考察说明
解决思路和方案都要针对 Vue 动态 src 不生效问题，覆盖常见根因和修复措施。
回答思路
- 【回答框架 1】动态绑定 src 不生效的核心原因是绑定值未正确更新或浏览器缓存了旧资源。常见场景包括：变量初始为空或路径写错（如缺少 require 或 import），直接使用字符串路径时 Vue 不会做模块解析，导致运行时路径错误。
- 【回答框架 2】另一类原因是数据更新但 DOM 未重新渲染，可能由于对象属性新增或删除未被 Vue 响应式系统追踪，需要使用 Vue.set 或数组方法触发更新。若使用 v-bind 且值未变化，浏览器会复用已缓存图片，需在 URL 后加时间戳或版本号强制刷新。
- 【回答框架 3】实战中用模块化导入方式，如 import img from './a.png' 或 require 动态拼接（注意 webpack 对变量路径的限制，需用 require.context 或完整相对路径），确保资源被正确打包。
- 【回答框架 4】此外还需检查脚本时机，如果 src 在 created 中设置而模态框图片元素尚未挂载，可改用 nextTick 或 watch 监听变量后再赋值。最终方案需结合构建工具和加载生命周期综合判断。
- 【关键点 1】必须用 require 或 import 方式引用本地图片，不能直接写字符串路径。
- 【关键点 2】使用 Vue.set 或替换数组索引保证新属性是响应式的。
- 【关键点 3】清除浏览器缓存：URL 追加随机参数或版本号。
- 【关键点 4】用 Vue.nextTick 确保在 DOM 更新后再设置 src，避免时序问题。
- 【关键点 5】若使用动态拼接路径，需使用 require.context 或完整相对路径。
- 【易错点 1】误以为响应式系统会拦截所有属性添加，实际上只有初始化存在的属性才是响应式的。
- 【易错点 2】忽略 webpack 对静态资源处理规则，认为动态路径字符串也能被正确打包。
- 【易错点 3】混淆事件循环，在数据改变后立即读取真实 DOM 获取的仍是旧值。