vue中动态引入图片

在Vue中，你可以使用require函数动态地引入图片。这在你需要根据组件的状态或者用户的交互来改变图片资源时特别有用。

以下是一个简单的例子，展示了如何在Vue组件中根据数据属性动态引入图片：

<template>
  <div>
    <img :src="imageSrc" alt="Dynamic Image">
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      imageName: 'example.jpg'
    };
  },
  computed: {
    imageSrc() {
      // 使用require动态引入图片
      return require(`@/assets/images/${this.imageName}`);
    }
  }
};
</script>

在这个例子中，imageName 是一个数据属性，可以根据需要动态改变。imageSrc 是一个计算属性，它使用require函数来构建图片的路径。@/assets/images/ 是图片存放的文件夹路径，确保你的图片放在项目的 src/assets/images/ 目录下。

注意：在webpack构建的Vue项目中，require 可以正确处理动态路径的图片资源。如果你的项目没有使用webpack，那么你可能需要其他方法来动态引入图片。