vue动态给img赋值

可以通过绑定动态属性 `:src` 来给 img 标签赋值：

<template>
  <div>
    <img :src="imageUrl" alt="图片">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'https://example.com/image.jpg'
    }
  },
  methods: {
    changeImageUrl() {
      this.imageUrl = 'https://example.com/another-image.jpg'
    }
  }
}
</script>

在上面的示例中，通过绑定 `:src` 属性将 `imageUrl` 绑定到 img 标签上。当 `imageUrl` 改变时，img 的 src 属性也会跟着改变。可以通过 `changeImageUrl` 方法改变 `imageUrl` 的值来测试。

相关问题

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中。

vue img src 动态赋值 src根据判断选择图片

你可以使用条件语句来选择图片的路径，例如：

<template>
  <div>
    <img :src="imageUrl" alt="">
  </div>
</template>

<script>
export default {
  data() {
    return {
      isBig: true
    }
  },
  computed: {
    imageUrl() {
      if (this.isBig) {
        return require('@/assets/images/big.jpg')
      } else {
        return require('@/assets/images/small.jpg')
      }
    }
  }
}
</script>

在上述代码中，我们使用了 `require` 函数来加载图片资源，根据 `isBig` 变量的值来选择不同的图片路径。当 `isBig` 为 `true` 时，图片路径为 `@/assets/images/big.jpg`，否则图片路径为 `@/assets/images/small.jpg`。注意，在使用 `require` 函数加载图片时，需要使用 `@` 符号来代表 `src` 目录。