Vue页面已经渲染完图片再获取图片的宽高

最新推荐文章于 2024-07-03 10:50:03 发布

有梦想的程序猿

最新推荐文章于 2024-07-03 10:50:03 发布

阅读量2k

点赞数 1

分类专栏：大前端

本文链接：https://blog.csdn.net/weixin_38694789/article/details/117126601

版权

Vue.js 图片加载宽高获取数组操作动态更新

关键词由CSDN通过智能技术生成

大前端专栏收录该内容

38 篇文章 1 订阅

订阅专栏

<el-image :src="item.filePath" ref="imgSize" @onload="imgload"></el-image>

<span >{{item.imageWidth }}*{{item.imageHeight }}</span> //展示图片的宽高

//js 
// 获取图片宽高,再把宽高值插入原来的数组  this.imgload() 这个方法在页面图片渲染完后调用
imgload(){
  console.log('this.$refs',this.$refs)
  if(this.$refs.imgSize){
     let _o = this.$refs.imgSize
     // console.log('_o',_o)
     let list = this.list.shift(0,1) //去掉原来数组第0个
     for (var i = 0; i < _o.length; i++){
       for(var j = 0; j < this.list.length; j++){
         if(i==j){
            this.list[j].imageHeight =_o[i].imageHeight // 在原来的数组添加字段宽
            this.list[j].imageWidth =_o[i].imageWidth  // 在原来的数组添加字段宽
         }
        }
      }
      this.list.unshift({upload:'upload'}) //在数组最前面添加这个对象
   }
},