Vue头像处理方案小结

个人思路获取后台返回头像url，判断图片宽度，高度。如果宽度>高度，使其高度填充盒

个人思路

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

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

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

效果图：

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

代码实现

<template>
 // 外面要给一个div并且限制宽度和高度，text-align center，overflow hidden
 <div class="head">
 // userInfoList.avatar 是后台返回给我的头像URL
 <img v-lazy="userInfoList.avatar" id="userhead" alt=""/> 
 </div>
 <div class="fl" v-for="(item, index) in matchList" :key="index">
 <div class="heads">
 <img v-lazy="item.adatar" class="headitem" alt=""/>
 </div>
 </div >
</template>
<script>
import { head, heads } from '@/assets/js/base' // 存放head，heads目录引入
export default {
data(){
 return {
 listQuery:{
 pg: 1,
 ps: 10
 }
},
methods:{
 //获取用户详情
 getUserInfoList(){
 getlist('mobile/user/pers/detail', funciton(res) {
 if(data.code == ERR_OK){
 _this.userInfoList = res.data
 // 单个头像处理，$nextTick处理去报 数据加载完成后 在进行图
 _this.$nextTick(function () { 
 head(res.data.avatar, 'userhead')
 })
 // 下拉加载多个头像处理
 res.data.item.forEach((item, index) => {
 if(_this.listQuery.pg>1){ // 下拉加载时，头像依然要进行处理
 let count = (10*(_this.listQuery.pg -1) + index)
 _this.$nextTick(function () {
 heads(item.adatar, count, 'headitem')
 })
 }else{
 _this.$nextTick(function () {
 heads(item.adatar, index, 'headitem')
 })
 }
 } 
 _this.listQuery.pg++
 }
 })
 }

assets文件js下的base.js

// 单个头像处理
export function head (objUrl, id) {
 let _userhead = document.getElementById(id)
 if(_userhead){
 if(objUrl){
 let img = new Image()
 img.src = objUrl
 img.onload = function () {
 let _width = img.width
 let _height = img.height
 if(_width >= _height){
 _userhead.style.width = '100%'
 }else{
 _userhead.style.height = '100%'
 }
 }
 }else{
 _userhead.style.width = '100%'
 }
 }
}
// 多个头像处理
export function heads (objUrl, index, className) {
 let _heads = document.getElementsByClassName(className)[index]
 if(_heads){
 if(objUrl){
 let img = new Image()
 img.src = objUrl
 img.onload = function () {
 let _width = img.width
 let _height = img.height
 if(_width >= _height){
 _heads.style.width = '100%'
 }else{
 _heads.style.height = '100%'
 }
 }
 }else{
 _heads.style.width = '100%'
 }
 }
}

总结

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