从小白到高手, vue中动态修改img标签src方式盘点！

2023-02-15 14:07:46

vue中动态修改img标签src的方法

前言

img标签是vue项目中一个常见的元素，用于加载和显示图片。有时我们需要在程序运行时动态修改img标签的src属性，以显示不同的图片。本文将深入探讨四种在vue中动态修改img标签src属性的方法，并讨论每种方法的优缺点，以帮助你做出明智的选择。

1. 常规写法

这是最基本的方法，直接在img标签的src属性中指定图片地址：

<img src="https://example.com/image.jpg">

这种方法简单易懂，但当需要动态修改src属性时，需要手动修改代码，不够灵活。

2. 使用v-bind绑定数据

v-bind指令可以将src属性绑定到一个数据变量上：

<img :src="imageUrl">

const app = new Vue({
  data() {
    return {
      imageUrl: 'https://example.com/image.jpg',
    }
  },
});

当imageUrl数据变量的值发生变化时，img标签的src属性也会自动更新。这种方法更灵活，但需要手动触发数据更新。

3. 使用computed计算属性

computed计算属性可以方便地计算src属性的值：

<img :src="computedImageUrl">

const app = new Vue({
  computed: {
    computedImageUrl() {
      return `https://example.com/image.jpg?v=${Date.now()}`
    },
  },
});

这种方法可以更灵活地计算src属性的值，例如，通过加入时间戳来确保每次加载的都是最新的图片。

4. 使用自定义指令

自定义指令可以让我们定义一个指令来处理src属性的更新：

<img v-img-src="imageUrl">

Vue.directive('img-src', {
  bind(el, binding) {
    el.setAttribute('src', binding.value)
  },
  update(el, binding) {
    el.setAttribute('src', binding.value)
  },
})

这种方法可以让我们自定义指令来处理src属性的更新，但需要编写更多的代码。

每种方法的优缺点

**| 方法 | 优点 | 缺点 |
|---|---|---|
| 常规写法 | 简单易懂 | 不够灵活 |
| v-bind绑定数据 | 更灵活 | 需要手动触发数据更新 |
| computed计算属性 | 更方便地计算src属性的值 | 需要在计算属性中加入逻辑判断 |
| 自定义指令 | 可以自定义指令来处理src属性的更新 | 需要编写更多的代码 |

如何选择合适的方法

在选择合适的方法时，需要考虑以下几点：

src属性是否需要经常修改。
是否需要在src属性中加入逻辑判断。
是否需要自定义指令来处理src属性的更新。

如果src属性需要经常修改，那么可以使用v-bind绑定数据或computed计算属性。如果需要在src属性中加入逻辑判断，那么可以使用computed计算属性。如果需要自定义指令来处理src属性的更新，那么可以使用自定义指令。

示例

<template>
  <div>
    <img :src="imageUrl">
    <button @click="changeImage">Change Image</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const imageUrl = ref('https://example.com/image.jpg');

    const changeImage = () => {
      imageUrl.value = 'https://example.com/new-image.jpg';
    };

    return {
      imageUrl,
      changeImage,
    };
  },
};
</script>