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

news/2024/11/16 13:55:49/

问题

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

解决

1.用户登录可以拿到用户的相关信息,这时候我们可以把头像、角色id、token等多页面需要共享的数据存入sessionStorage,角色id可以渲染左侧菜单,token判断是否登录
在这里插入图片描述
2.拿到头像的值
在这里插入图片描述
3.定义动态拼接图片的方法,注意必须写require
在这里插入图片描述
4.把src换成:src,调用getTouxiang方法
在这里插入图片描述


http://www.ppmy.cn/news/788624.html

相关文章

根据ip获取地址

php 根据ip获取地址 js方法获取用户的 ip 和 地址 获取用户的来源:$_SERVER[‘HTTP_REFERER’] 获取用户的 IP:$ip $_SERVER[“REMOTE_ADDR”]; 获取用户的地址: 1 > 使用淘宝API接口 function getCity(KaTeX parse error: Expecte…

js通过图片url获取图片base64编码

方法1:直接返回图片编码 参数url:图片的路径 ;参数imgType:图片类型默认image/png;方法返回值:图片base64编码 function getBase64ImageUrl(url, imgType) {if(!imgType){imgType"image/png";}…

vue 组件中图片地址,图片获取

前提&#xff1a;在组件中使用引用图片&#xff0c;用于<img src> 或者 背景图片background; 当我们利用vue-cli 搭建好项目的框架&#xff0c;开始高高兴兴开发组件的时候&#xff0c;有的时候想加一张图片&#xff0c;或者 在样式中加个背景&#xff0c;会发现&…

vue从数据库获取图片地址,为什么图片地址为变量时找不到图片?

vue展示以变量地址的文件 vue新手 刚开始学习vue的同学&#xff0c;可能会遇到一个问题&#xff0c;为什么当图片的地址为一个变量的时候&#xff0c;图片就找不到了呢&#xff1f; 接下来我就讲述一下我的解决方法&#xff0c;及思路。 首先&#xff0c;我们打开浏览器&am…

Android根据图片路径获取图片名字

public static String getPicNameFromPath(String picturePath){String temp[] picturePath.replaceAll("\\\\","/").split("/");String fileName "";if(temp.length > 1){fileName temp[temp.length - 1];}return fileName;}

oss 私有云访问 获取临时图片地址

oss私有bucket 访问&#xff0c;当然公有bucket可以直接访问&#xff0c;私有可以获取临时访问地址 先配置一些参数 记得maven引入oss SDK <!--Add oss--><dependency><groupId>com.aliyun.oss</groupId><artifactId>aliyun-sdk-oss</artif…

根据图片的url获取图片的宽高

1. 代码实现 let image new Image() image.src this.imgUrl // imgUrl&#xff1a;图片的地址 console.log(image.width)2. Image() 1&#xff09;描述 Image() 函数将会创建一个新的 HTMLImageElement 实例。 它的功能等价于 document.createElement(img) 2&#xff09…

通过图片url 获取图片file对象

/*** 通过图片url 获取图片file对象* param url* param fileName 文件名称(一定要带后缀)* param callback 回调函数* returns {*}*/ function getImageFileFromUrl(url, fileName,callback) {var blob null;var xhr new XMLHttpRequest(); xhr.open("GET", url);x…