vue 动态设置静态资源图片的三种方式

问题：

Vue项目中，不能直接使用动态的图片资源路径。

 <!-- OK 编译前设置 ↓ -->
 <img src="../assets/images/banner_1.png" />
 
 <!-- NG 编译后设置 ↓ -->
 <img :src="url" />

解决方法：

• 方法一： 将图片放到public目录下后，直接引用

export default {
  data() {
    return {
      url: 'banner_1.png'
    }
  },
}

• 方法二： require方式引用

export default {
  data() {
    return {
      url: require(`../assets/images/banner_1.png`)
    }
  },
}

• 方法三： import方式引用

import imgPath from '../assets/images/banner_1.png'

export default {
  data() {
    return {
      url: imgPath
    }
  },
}