vue img src 动态赋值

作者：浪子无家发布日期:2025-11-19 浏览:36

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

<script>
export default {
  data() {
    return {
      // 定义一个数据属性 imageSrc，用于存储图片的 URL
      imageSrc: 'https://example.com/image.jpg'
    };
  },
  methods: {
    // 可以通过方法来改变 imageSrc 的值，从而实现动态赋值
    changeImage(newImageUrl) {
      this.imageSrc = newImageUrl;
    }
  }
};
</script>

解释说明：

v-bind:src 或简写为 :src 用于将 img 标签的 src 属性绑定到 Vue 实例中的数据属性 imageSrc。
imageSrc 是在 data 函数中定义的一个响应式数据属性，它的初始值是一个图片的 URL。
你可以通过调用 changeImage 方法来动态改变 imageSrc 的值，从而更新显示的图片。

上一篇：vue编辑器

下一篇：vue icon