Vue头像处理方案小结

个人思路

获取后台返回头像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头像处理方案小结,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • 详解vue更改头像功能实现

    如上图所示:需要完成的功能是点击更改头像,获取本地文件库,选择图片后将原始图片替换.这里我就直接用html文件引入vue来简单实现在这功能,代码如下: HTML: <div id="app"> <div class="item_bock head_p"> <div class="head_img"> <img :src="userInfo.avatar"/> <--图片地址

  • 详解Vue+axios+Node+express实现文件上传(用户头像上传)

    Vue 页面的代码 <label for='my_file' class="theme-color"> <mu-icon left value="backup"></mu-icon> 修改头像 </label> <input type="file" ref="upload" name="avatar" id='my_file' style="d

  • vue中使用axios post上传头像/图片并实时显示到页面的方法

    在前端开发中,为了更好的用户体验,在头像上传时会先将图片显示到页面然后点击保存按钮 完成图片的上传成功 代码部分有参考他人的写法. html代码: <div id="myPhoto" v-show="personalPhoto"> <div class="viewPhoto"> <img src="" alt="" id="portrait"style=&q

  • node+vue实现用户注册和头像上传的实例代码

    最近正好空闲,写了个实用注册代码,分享给大家,有需要的朋友可以了解一下 数据库我使用的是MongoDB. 首先做文件上传,要保证协议里面的'Content-Type'为'multipart/form-data'. 注册的步骤: 将用户名密码,图片等提交给node端 node端将图片保存到服务器,图片路径及注册用户的个人信息保存到mongodb数据库. 项目目录如下,注册功能只是其中的第一步: 前端框架使用的是vue.js,ajax使用的是vue的组件vue-resource. 前端上传代码如下

  • Vue头像处理方案小结

    个人思路 获取后台返回头像url,判断图片宽度,高度. 如果宽度>高度, 使其高度填充盒子 两边留白. 如果宽度<高度,使得宽度填充盒子 上下留白. 效果图: 缺陷:懒加载图片 会出现闪烁 代码实现 <template> // 外面要给一个div并且限制宽度和高度,text-align center,overflow hidden <div class="head"> // userInfoList.avatar 是后台返回给我的头像URL <

  • Vue 打包体积优化方案小结

    Vue-cli3 打包体积优化方案 前言: 公司项目完成后 ,打包完成后有1.18MB,其实感觉还行了,但是还可以有优化的地方,对于咱们有精益求精(有没有还是有点*数的)的精神下再去优化,可以先在项目中安装webpack-bundle-analyzer可以看到各个文件的大小 npm install webpack-bundle-analyzer -save-dev 在vue.config.js中进行配置 module.exports = { chainWebpack: config => { c

  • Rust开发WebAssembly在Html和Vue中的应用小结(推荐)

    目录 我最大的感受 Rust在web上的应用 本文主题 应用工具:HBuilder.CLion 1.创建一个wasm 2.在Html中的应用 4.最近遇到的问题 最初是由Mozilla研究院的Graydon Hoare设计创造,然后在Dave Herman, Brendan Eich以及很多其他人的贡献下逐步完善的.Rust的设计者们通过在研发Servo网站浏览器布局引擎过程中积累的经验优化了Rust语言和Rust编译器. 我最大的感受 开始我是抵触它的,原因很简单,它太难学了!!!好害怕语法上

  • Vue最新防抖方案(必看篇)

    函数防抖(debounce):当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发了事件,就重新开始延时.举个栗子,持续触发scroll事件时,并不执行handle函数,当1000毫秒内没有触发scroll事件时,才会延时触发scroll事件. 函数节流(throttle):当持续触发事件时,保证一定时间段内只调用一次事件处理函数.节流通俗解释就比如我们水龙头放水,阀门一打开,水哗哗的往下流,秉着勤俭节约的优良传统美德,我们要把水龙头关小点,

  • 一文掌握Redis的三种集群方案(小结)

    在开发测试环境中,我们一般搭建Redis的单实例来应对开发测试需求,但是在生产环境,如果对可用性.可靠性要求较高,则需要引入Redis的集群方案.虽然现在各大云平台有提供缓存服务可以直接使用,但了解一下其背后的实现与原理总还是有些必要(比如面试), 本文就一起来学习一下Redis的几种集群方案. Redis支持三种集群方案 主从复制模式 Sentinel(哨兵)模式 Cluster模式 主从复制模式 1. 基本原理 主从复制模式中包含一个主数据库实例(master)与一个或多个从数据库实例(sl

  • webpack的移动端适配方案小结

    目录 rem vw 适配第三方UI框架 结语 在移动端开发的过程中,一个最常见的问题就是适配不同的屏幕宽度.目前比较常见的适配方案有rem和vw,它们都是css中的相对单位. rem W3C对rem的定义是 font-size of the root element,它是一个只相对于浏览器的根元素(HTML元素)的font-size的来确定的单位,也就是说对于不同宽度的机型,我们只需要计算出对应的根元素的字体大小,用同样的css代码可以实现等比适配.考虑最简单的情况: html代码片段 //移动

  • 基于Redis实现延时队列的优化方案小结

    目录 一.延时队列的应用 二.延时队列的实现 三.总结 一.延时队列的应用 近期在开发部门的新项目,其中有个关键功能就是智能推送,即根据用户行为在特定的时间点向用户推送相应的提醒消息,比如以下业务场景: 在用户点击充值项后,半小时内未充值,向用户推送充值未完成提醒. 在用户最近一次阅读行为2小时后,向用户推送继续阅读提醒. 在用户新注册或退出应用N分钟后,向用户推送合适的推荐消息. … 上述场景的共同特征就是在某事件触发后延迟一定时间后再执行特定任务,若事件触发时间点可知,则上述逻辑也可等价于在

  • vue顶部菜单栏实现小结

    参考: 使用element-ui的el-menu导航选中后刷新页面保持当前选中状态 效果图1: <!--home--> <template> <div class="homeContainer"> <div style=" display: flex; height: 60px; line-height: 60px; align-items: center; " > <div style=" displ

  • vue项目proxyTable配置小结

    目录 前言 如何配置proxyTable 关于proxyTable的原理 前言 proxyTable是一个用于Vue.js应用程序的配置选项,它允许您在开发过程中代理后端API请求.这一功能的作用是解决由于浏览器的同源策略所限制而导致的跨域请求问题.当前端应用程序部署在一个Web服务器上并向不同的后端API发送请求时,这个功能就变得尤为重要. 在Vue.js应用程序中使用proxyTable的主要优点是能够简化配置,方便地进行本地开发和调试.在开发过程中,可以将所有的API请求都代理到本地的开发

  • 基于Vue SEO的四种方案(小结)

    前言:众所周知,Vue SPA单页面应用对SEO不友好,当然也有相应的解决方案,下面列出几种最近研究和使用过的SEO方案,SRR和静态化基于Nuxt来说. 1.SSR服务器渲染: 2.静态化: 3.预渲染prerender-spa-plugin: 4.使用Phantomjs针对爬虫做处理. 1.SSR服务器渲染 关于服务器渲染:Vue官网介绍 ,对Vue版本有要求,对服务器也有一定要求,需要支持nodejs环境. 使用SSR权衡之处: 开发条件所限,浏览器特定的代码,只能在某些生命周期钩子函数

随机推荐