vue3 img 中变量引入src

在Vue 3中，可以使用插值表达式(`{{ }}`)和`v-bind`指令来动态绑定`<img>`标签的`src`属性。

如果你想要绑定一个变量作为`<img>`标签的`src`属性，可以使用插值表达式和模板字符串来实现。例如：

<template>
  <div>
    <img :src="`${imgBaseUrl}/${imageName}`" alt="My Image">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgBaseUrl: 'http://example.com/images',
      imageName: 'my-image.jpg'
    }
  }
}
</script>

在上面的代码中，我们使用了模板字符串来将`imgBaseUrl`和`imageName`拼接成完整的图片URL，并将其绑定到`<img>`标签的`src`属性上。这样，当`imgBaseUrl`或`imageName`发生变化时，图片的URL也会相应地更新。

另外，你还可以使用`v-bind`指令来绑定`src`属性，例如：

<template>
  <div>
    <img v-bind:src="imageUrl" alt="My Image">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageName: 'my-image.jpg'
    }
  },
  computed: {
    imageUrl() {
      return `http://example.com/images/${this.imageName}`
    }
  }
}
</script>

在上面的代码中，我们定义了一个计算属性`imageUrl`，用于返回完整的图片URL，并将其绑定到`<img>`标签的`src`属性上。当`imageName`发生变化时，计算属性`imageUrl`也会相应地更新。