Vue——如何获取动态图片地址

问题当我们在Vue页面显示当前登录用户的头像时，该如何加载后端传过来的动态图片地址呢？这时是固定地址，第一时间我们想到直接在src前加:，使用vue的双向数据绑定即可，但是试了多次没有效果，原来要加require关键字…解决1.用户登录可以拿到用户的相关信息，这时候我们可以把头像、角色id、token等多页面需要共享的数据存入sessionStorage,角色id可以渲染左侧菜单，token判断是

bei-zhen

3131人浏览 · 2021-01-13 11:13:45

bei-zhen · 2021-01-13 11:13:45 发布

问题

当我们在Vue页面显示当前登录用户的头像时，该如何加载后端传过来的动态图片地址呢？
在这里插入图片描述
这时是固定地址，第一时间我们想到直接在src前加:，使用vue的双向数据绑定即可，但是试了多次没有效果，原来要加require关键字…

解决

1.用户登录可以拿到用户的相关信息，这时候我们可以把头像、角色id、token等多页面需要共享的数据存入sessionStorage,角色id可以渲染左侧菜单，token判断是否登录
在这里插入图片描述
2.拿到头像的值

3.定义动态拼接图片的方法，注意必须写require

4.把src换成:src，调用getTouxiang方法

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^