個人思路
獲取后臺返回頭像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頭像處理方案小結,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持!
新聞熱點
疑難解答