Vue 中对图片地址进行拼接的方法

当我们在 Vue 中需要加载图片时，有时候需要动态地拼接图片的地址。下面我为大家提供两种常用方法来实现这个需求。

方法一：使用插值表达式

我们可以使用 Vue 的插值表达式来动态地拼接图片地址，具体过程如下：

<template>
  <div>
    <img :src="imagePath + imageName">
  </div>
</template>

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

我们在上述代码中定义了 imagePath 和 imageName 两个变量，其中 imagePath 变量存放了图片所在的路径。在页面中，我们使用 :src 指令来将 imagePath 和 imageName 拼接成完整的图片路径，从而动态地加载图片。

方法二：使用计算属性

除了使用插值表达式，我们还可以使用计算属性来动态地拼接图片地址。具体过程如下：

<template>
  <div>
    <img :src="fullImagePath">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imagePath: '/static/images/',
      imageName: 'example.jpg'
    }
  },
  computed: {
    fullImagePath() {
      return this.imagePath + this.imageName
    }
  }
}
</script>

在上述代码中，我们定义了一个计算属性 fullImagePath，在该计算属性中将 imagePath 和 imageName 全部拼接起来，作为最终的图片路径。在页面中，我们使用 :src 指令来绑定该计算属性，从而动态地加载图片。

通过上述两种方法，我们可以动态地拼接图片地址，实现灵活、高效的图片加载。