vue头像加白边_Vue头像处理方案小结_咋地 _前端开发者

个人思路

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

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

如果宽度

效果图：

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

代码实现

// 外面要给一个div并且限制宽度和高度，text-align center，overflow hidden

// userInfoList.avatar 是后台返回给我的头像URL

import { head, heads } from '@/assets/

assets文件

// 单个头像处理

export function head (objUrl, id) {

let _userhead = document.getElementById(id)</