今天小编给大家分享一下Vue中如何实现头像处理的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。
代码实现
计算
安全
数据库
网络和加速
企业服务
<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中如何实现头像处理”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注亿速云行业资讯频道。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
原文链接：https://my.oschina.net/u/4582735/blog/4384198
