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` 目录。

相关问题

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

如果你需要循环展示多张图片，并且每张图片的路径需要根据不同的条件来选择，你可以在循环中动态绑定 `src` 属性。例如：

<template>
  <div>
    <div v-for="image in images" :key="image.id">
      <img :src="getImageUrl(image)" alt="">
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [
        { id: 1, isBig: true },
        { id: 2, isBig: false },
        { id: 3, isBig: true }
      ]
    }
  },
  methods: {
    getImageUrl(image) {
      if (image.isBig) {
        return require(`@/assets/images/big-${image.id}.jpg`)
      } else {
        return require(`@/assets/images/small-${image.id}.jpg`)
      }
    }
  }
}
</script>

在上述代码中，我们使用了 `v-for` 指令循环展示 `images` 数组中的图片，根据每个图片对象的 `isBig` 属性来选择不同的图片路径。在 `getImageUrl` 方法中，我们使用了模板字符串来动态生成图片路径。注意，在使用模板字符串动态生成图片路径时，需要使用 `@` 符号来代表 `src` 目录。

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