Vue3 中 <img> 图片地址绑定教程：v-bind 指令与简写冒号语法

在 Vue3 中，可以使用 v-bind 指令或简写的冒号语法来将图片地址属性绑定到一个 Vue 实例的数据或计算属性上。

1. 使用 v-bind 指令：

<img v-bind:src='imageSrc' alt='My Image'>

在 Vue 实例的 data 选项中定义一个 imageSrc 属性，然后将该属性绑定到 img 元素的 src 属性上。

2. 使用简写的冒号语法：

<img :src='imageSrc' alt='My Image'>

与上述方式相同，将 imageSrc 属性绑定到 img 元素的 src 属性上。

在 Vue 实例中，可以将 imageSrc 属性设置为一个字符串，例如：

data() {
  return {
    imageSrc: 'path/to/image.jpg'
  }
}

或者，可以将 imageSrc 属性设置为一个计算属性，以便根据需要动态生成图片地址：

data() {
  return {
    imageName: 'image.jpg'
  }
},
computed: {
  imageSrc() {
    return `path/to/${this.imageName}`;
  }
}

上述计算属性将根据 imageName 动态生成图片地址。