vue问题记录- 2.vue中 :src 动态赋值问题(路径别名写法)

• 案发现场：

直接赋值：使用如下例子就可以访问到图片。

<img class="searchImg" src="~assets/img/sousuosearch.png" />

当使用动态赋值：下面的操作不能访问到图片。

<img :src="$store.state.loginUserInfo.headPicUrl" />

// 登录用户的信息
	loginUserInfo:{
		username:'',
		company:'',
		headPicUrl: '~assets/img/headPic.jpg'
	}

• 解决方案：

正确的操作为：headPicUrl: require('assets/img/headPic.jpg')。地址变量赋值时应使用require，并且去掉~符号。

// 登录用户的信息
	loginUserInfo:{
		username:'',
		company:'',
		headPicUrl: require('assets/img/headPic.jpg')
	}