vue中动态绑定img的src值，但是不想用前面拼接请求的方式，如何实现

在Vue中，可以使用v-bind指令动态绑定img标签的src属性。如果不想使用前面拼接请求的方式，可以使用require()函数来加载图片，如下所示：

<template>
  <div>
    <img :src="require(`@/assets/images/${imageName}`)" alt="">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageName: 'example.jpg'
    }
  }
}
</script>

在上面的代码中，使用了require()函数来加载图片，其中@表示项目根目录，/assets/images/是存放图片的路径，imageName是数据中存储的图片名称，需要根据实际情况进行修改。

相关问题

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`也会相应地更新。

vue中image标签中src使用反应号

在Vue中，我们可以使用反应号作为插值表达式的标识符。因此，如果你想在image标签中使用反应号来绑定图片的src属性，可以使用以下代码：

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

<script>
export default {
  data() {
    return {
      imageName: 'example.jpg'
    }
  }
}
</script>

在这个例子中，我们使用反应号来绑定图片的src属性。在反应号内部，我们可以使用变量和表达式来动态地拼接图片的路径。在这个例子中，我们使用了一个变量imageName来指定图片的文件名。