Vue头像处理方案小结

个人思路

获取后台返回头像url，判断图片宽度，高度。

如果宽度高度，使其高度填充盒子两边留白。

如果宽度高度，使得宽度填充盒子上下留白。

效果图：

缺陷：懒加载图片会出现闪烁

代码实现

模板/外面要给一个差异并且限制宽度和高度，文本居中对齐，溢出隐藏div class=' head '/user infolist。阿凡达是后台返回给我的头像URL img v-lazy=' usernoflist。avatar ' id=' user head ' alt=' '//div class=' fl ' v-for='(item，index)在MathList ' : key=' index ' div class=' heads ' img v-lazy=' item。adatar ' class=' head item ' alt=' '//div/div/template script从' @/assets/js/base/存放头，头目录引入导出默认{ data(){ return { listQuery: { pg : 1，ps: 10 }}，methods:{ //获取用户详情getuserinfolist(){ getlist(' mobile/user/pers/detail '，function(RES){ if(data。代码==ERR _ OK){ _ this。userinfolist=RES . data//单个头像处理，$nextTick处理去报数据加载完成后在进行图_这个$ NextTick()函数(){ head(RES . data。头像，‘user head’)})//下拉加载多个头像处理res.data.item.forEach((item，index)={ if(_ this。列表查询。pg1){//下拉加载时，头像依然要进行处理让count=(10 *(这个。列表查询。pg-1)索引)_ this .$ NextTick(function(){ heads(item。adatar，count，' head item ')})else { _ this .$ NextTick(function(){ heads(item。adatar，index，' head item ')})} } _ this。列表查询。pg } })资产文件射流研究…下的base.js

//单个头像处理导出函数头(objUrl，id){ let _ user head=document。getElementBYid(id)if(_ user head){ if(ObJurl){ let img=new Image()。img。src=ObJurl img。onload=function(){ let _ width=img。width let _ height=img。height if(_ width=_ height){ _ user head。风格。width=' 100% ' } else { _ user head。风格。高度=' 100% ' } }多个头像处理导出功能标题（对象、索引、类名){ let _ heads=document。getelementsbyclasname(类名)[index]if(_ heads){ if(Objurl){ let img=new Image()。img。src=Objurl img。onload=function(){ let _ width=img。width let _ height=img。高度if(_ width=_ height){ _ heads。风格。width=' 100% ' } else { _ heads。风格。高度=' 100% ' } }其他{ _ heads .总结

以上所述是小编给大家介绍的某视频剪辑软件头像处理方案小结，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！