vue动态获取图片路径

在Vue中动态获取图片路径有多种方式，下面介绍两种常用的方法：

1. 使用require方式

可以在Vue组件中使用require方法来获取图片路径，代码如下：

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

<script>
export default {
  data() {
    return {
      imageName: 'example.jpg'
    }
  },
  computed: {
    imagePath() {
      return require(`@/assets/images/${this.imageName}`)
    }
  }
}
</script>

在computed中使用require方法将图片路径动态地赋值给imagePath。

2. 使用import方式

另一种方式是使用ES6的import方法动态获取图片路径，代码如下：

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

<script>
export default {
  data() {
    return {
      imageName: 'example.jpg'
    }
  },
  computed: {
    imagePath() {
      return require(`@/assets/images/${this.imageName}`)
    }
  }
}
</script>

在computed中使用import方法将图片路径动态地赋值给imagePath。

以上两种方法都是比较常用的动态获取图片路径的方式，可以根据具体情况选择适合自己的方式。