在vuejs中动态更改src路径

<template>
  <div>
    <img :src="imageSrc" alt="动态图片">
    <button @click="changeImage">更改图片</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageSrc: '初始图片路径'
    };
  },
  methods: {
    changeImage() {
      // 在这里可以根据需要更改imageSrc的值
      this.imageSrc = '新的图片路径';
    }
  }
};
</script>

<template>
  <div>
    <img :src="dynamicImageSrc" alt="动态图片">
    <button @click="changeImage">更改图片</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageName: '初始图片名称'
    };
  },
  computed: {
    dynamicImageSrc() {
      // 在这里可以根据imageName的值计算出动态的图片路径
      return '动态图片路径/' + this.imageName + '.jpg';
    }
  },
  methods: {
    changeImage() {
      // 在这里可以根据需要更改imageName的值
      this.imageName = '新的图片名称';
    }
  }
};
</script>