vue图片的动态绑定

 1、就是想办法给路径前边加一个require()

            <!-- 直接写相对地址 -->
          <img src="../../../assets/logo.png" alt="" />
          <!-- 定义数据为require，双向绑定 -->
          <!-- imglogo2: require("../../../assets/logo.png"), -->
          <img :src="imglogo2" alt="" />

          <!-- 路径相同更改图片，imglogo: "logo.png", -->
          <img :src="require(`../../../assets/${imglogo}`)" alt="" />

 注意点

如果图片路径为../../../assets/logo.png或者@/assets/logo.png

data中数据形式为imglogo1: "@/assets/logo.png",

以下形式识别不了,../和@/作为数据加到require()中时，路径错误

要直接作为字符串写在require()中

<img :src="require(imglogo)" alt="" />
<img :src="require(`${imglogo1}`)" alt="" />

 data() {
    //这里存放数据
    return {
        
      imglogo: "@/assets/logo.png",
      imglogo1: "../../assets/logo.png",

      }
}

 2、动态绑定的三种方法

1、路径相同，在同一文件夹更改图片

<!-- 路径相同更改图片，imglogo: "logo.png", -->
          <img :src="require(`../../../assets/${imglogo}`)" alt="" />

 数据形式

data() {
    //这里存放数据
    return {
      imglogo: "logo.png",
        }
}

2、src可以绑定一个事件，返回值作为url路径

<!-- 绑定 methods中的事件传参，返回路径 -->
          <img :src="bindIcon(imglogo)" />

 js定义数据，处理数据

data() {
    //这里存放数据
    return {
      imglogo: "logo.png",
        }
},
//方法集合
  methods: {
  
    //获取图片地址
    bindIcon(icon) {
      return require("@/assets/" + icon);
    },
}

3、在mounted中处理变量，加上require

          <!-- 在mounted中处理变量，加上require -->
          <img :src="imglogo3" alt="" />

 js处理数据

data(){
       return{
            imglogo: "logo.png",
            imglogo3: "",
            a: "assets/",
        }

}

 //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

    this.imglogo3 = require(`@/${this.a}${this.imglogo}`);
}