vue2 img的src动态绑定require

在Vue.js 2.x版本中，如果你想动态地绑定图片资源（`<img>`标签的`src`属性），特别是在处理模块化文件（如使用`require()`引入）时，你可以利用JavaScript的动态表达式结合`v-bind`指令。假设你有一个在`assets`目录下的图片资源，例如`images/avatar.jpg`，并且它通过模块化管理，可以这样动态绑定：

<img :src="require('@/assets/images/avatar.jpg')">

这里`@`符号是Vue.js的路径别名，可以根据你的配置文件（通常`.vue`组件文件的`config.js`或全局的`vue.config.js`）来设置。`require`函数用于加载动态资源，并返回图片的实际URL。

如果你需要在某个数据变量变化时更新图片源，只需将这个变量绑定到`src`上即可：

data() {
  return {
    avatarUrl: '@/assets/images/default-avatar.jpg'
  }
},
methods: {
  updateAvatar(url) {
    this.avatarUrl = url;
  }
},
// 使用时
<button @click="updateAvatar('@/assets/images/new-avatar.jpg')">更换头像</button>

当你点击按钮时，会调用`updateAvatar`方法，从而改变`avatarUrl`并更新图片显示。