vue3 img src 动态赋值

<template>
  <div>
    <!-- 使用 v-bind 动态绑定 img 的 src 属性 -->
    <img :src="imageSrc" alt="Dynamic Image" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 定义一个数据属性来存储图片的路径
      imageSrc: 'https://example.com/path-to-your-image.jpg'
    };
  },
  methods: {
    // 可以通过方法动态更改图片路径
    updateImage(newSrc) {
      this.imageSrc = newSrc;
    }
  },
  mounted() {
    // 组件挂载后可以动态设置图片路径
    setTimeout(() => {
      this.updateImage('https://example.com/new-path-to-your-image.jpg');
    }, 2000);
  }
};
</script>

解释说明：

1. 模板部分：使用 v-bind 指令（简写为 :）将 img 标签的 src 属性绑定到 data 中定义的 imageSrc。
2. 脚本部分：
   • data 函数返回一个对象，其中包含一个 imageSrc 属性，用于存储图片的 URL。
   • methods 中定义了一个 updateImage 方法，可以通过传入新的图片路径来更新 imageSrc。
   • mounted 生命周期钩子中使用 setTimeout 模拟在组件挂载两秒后更新图片路径。