Vue动态绑定img的src属性

img图片路径：根据不同的状态显示不同地址

用于图片地址不是绝对路径

1. 利用import引入图片路径

编译时加载（效率更高）【由于是编译时加载，所以import命令会提升到整个模块的头部】

// 地址引入
import imgUrl from '@/assets/bg.png'

// 计算属性
computed: {
   getImg() {
   	// 条件判断，最后输出
     return imgUrl
   }
 }
 
// 页面引用
<img :src="getImg" alt="">

---

2. 利用require引入

运行时加载

// 计算属性
 computed: {
  getImg() {
     return require('@/assets/bg.png')
   },
 }
// 页面引用
<img :src="getImg" alt="">