Vue 中如何修改 img 的 src 属性

在 Vue 开发中，动态修改 img 的 src 属性是一个常见需求。它能为页面带来丰富的交互效果，比如根据用户操作展示不同图片，或者从后端获取图片路径并实时显示。下面就来探讨一下在 Vue 中实现这一功能的方法。

数据绑定方式

我们可以通过 Vue 的数据绑定来实现 img 的 src 属性修改。在 Vue 组件的 data 选项中定义一个变量来存储图片路径。

<template>
  <img :src="imageSrc" alt="动态图片">
</template>

<script>
export default {
  data() {
    return {
      imageSrc: '初始图片路径'
    }
  }
}
</script>

这里使用了 Vue 的指令 :src 进行数据绑定，将 imageSrc 变量的值绑定到 img 的 src 属性上。之后，我们可以在组件的其他方法中修改 imageSrc 的值，从而实现图片的动态更新。

事件驱动修改

当需要根据用户操作或其他事件来改变图片时，可以通过事件驱动来修改 src 属性。比如，点击一个按钮来切换图片：

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

<script>
export default {
  data() {
    return {
      imageSrc: '初始图片路径'
    }
  },
  methods: {
    changeImage() {
      this.imageSrc = '新的图片路径';
    }
  }
}
</script>

在上述代码中，为按钮绑定了 click 事件，点击按钮时调用 changeImage 方法，在该方法中修改 imageSrc 的值，进而实现 img 的 src 属性修改。

从后端获取路径并更新

实际应用中，图片路径常常是从后端服务器获取的。我们可以使用 axios 等工具来发送请求获取路径，然后更新 src 属性。

<template>
  <img :src="imageSrc" alt="动态图片">
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      imageSrc: ''
    }
  },
  mounted() {
    this.fetchImagePath();
  },
  methods: {
    async fetchImagePath() {
      try {
        const response = await axios.get('后端接口地址');
        this.imageSrc = response.data.imagePath;
      } catch (error) {
        console.error('获取图片路径失败', error);
      }
    }
  }
}
</script>

在组件挂载时调用 fetchImagePath 方法，从后端获取图片路径并赋值给 imageSrc，从而实现根据后端数据动态更新 img 的 src 属性。

在 Vue 中修改 img 的 src 属性，通过数据绑定、事件驱动以及与后端交互等方式都能轻松实现，满足不同场景下的需求。