vue项目中点击按钮切换图片

<div class="text-btnBox">
            <el-button type="primary" @click="changeone()">信息采集</el-button>
            <el-button type="primary" @click="change()">岩层结构输出</el-button>
          </div>

<!-- 引入图片 -->
       <el-image id="laji"
            style="width: 340px; height: 600px"
            :src="imgArr[0]"
          ></el-image>

<script>
// import av from '@/assets/images/1.png';
export default {
  data() {
    return {
      // av:require("@/assets/images/1.png")
      url: "../../../static/2.png",
      url1: "../../../static/3.png",
      url2: "../../../static/4.png",
      url3: "../../../static/5.png",
      url4: "../../../static/6.png",
      url5: "../../../static/7.png",
       imgArr:[
           "../../../static/2.png",
           "../../../static/7.png",
            ],
             index:0,
             i:1
    };
  },
  methods: {
    //改变图片
    change() {
       var msg=document.getElementById("laji");
       //切换到另外一个图片
          msg.src="../../../static/7.png";
    },
    changeone(){
        var msg=document.getElementById("laji");
       //切换到另外一个图片
          msg.src="../../../static/2.png";
    }
  },
};
</script>