VUE中的img的:src动态加载图片的问题，require也不能随便用

问题描述：

写的一个系统，用户登录后会使用数据库的数据作为用户头像，需要显示在页面上，那头像链接就需要用变量表示，那就用到了:src做动态绑定，直接加变量

问题解决：

1、使用require

由于我们在写代码用的链接是编译前的，编译后图片文件，require中直接写死是没有错误的（里面全是字符串的话），但是如果只用一个变量，就会报错

2、使用require的小技巧

查找到了一篇有用的教程——前端es6 require动态引入图片报错Error: Cannot find module
，“因为require它是打包工具所需要的标识，你搞成运行时通过变量去定义的话，它就没办法打包了啊”，那就加个字符串，做个前缀吧

<img :src="imgUrl" class="user-avator" alt />

computed: {
        imgUrl: function () {
            return this.photo;
        }
 }

this.photo = require("../../assets/img/"+obj.photo);

obj即为用户信息对象，里面的photo存储用户头像文件名，加上前缀文件夹，用require就可以动态获取了