vue给img标签赋值src

vue框架对于img标签的src属性的赋值可以通过两种方式实现。

第一种方式是通过直接绑定src属性来实现，在模板中使用v-bind指令绑定img标签的src属性即可。例如：

<template>
  <div>
    <img :src="imgUrl" alt="图片">
  </div>
</template>
<script>
export default {
  data() {
    return {
      imgUrl: '图片地址'
    }
  }
}
</script>

在这个例子中，我们通过v-bind指令绑定img标签的src属性到data对象中的imgUrl变量上。因此，当data对象中的imgUrl变量发生变化时，img标签将自动更新其src属性值。

第二种实现方式是通过计算属性来动态计算img标签的src属性值。我们可以在组件中定义一个计算属性，这个计算属性返回一个动态的图片地址。例如：

<template>
  <div>
    <img :src="imageUrl" alt="图片">
  </div>
</template>
<script>
export default {
  data() {
    return {
      imageName: '图片名称'
    }
  },
  computed: {
    imageUrl() {
      return `路径/${this.imageName}.png`
    }
  }
}
</script>

在这个例子中，我们通过计算属性动态计算img标签的src属性值。这个计算属性返回一个字符串，这个字符串包括路径和文件名称，这个文件名称是一个动态的值，我们可以将其定义为data对象中的属性。这样，当data对象中的imageName属性发生变化时，计算属性会自动重新计算img标签的src属性值，并更新到DOM中。