ES6 require ( 路径变量 ) 相关使用方法---动态传值给require加载模块
程序员文章站
2022-07-01 20:39:26
最近做了一个关于vue.js的小demo: 当用户登录时,使用状态保存vuex将用户的头像信息存储到store.state当中,这样不同用户登录就会显示相应的头像。 具体实现方法: 在组件的计算属性当中通过 this.$store.getters.userImg 获取当前用户的头像,然后用requi ......
最近做了一个关于vue.js的小demo:
当用户登录时,使用状态保存vuex将用户的头像信息存储到store.state当中,这样不同用户登录就会显示相应的头像。
具体实现方法:
在组件的计算属性当中通过 this.$store.getters.userImg 获取当前用户的头像,然后用require引入图片,最后 return userImage 即可。
(其中 userImage 用于 动态绑定 src属性上,即 :src="userImage ")。
特别注意:
require中的路径不可以是单独的一个变量,不过可以使用如下的方式:路径+变量。
computed: { currentUser() { return this.$store.getters.currentUser; }, userImg() { var imageName=this.$store.getters.userImg; var userImage = require('../../static/userImg/' + imageName); return userImage; } },
如果有更好的实现方法,请留言多多指教~~~
上一篇: webpack公共组件引用路径简化小技巧
下一篇: JavaScript 基于原型链的继承