Vue项目中获取图片的 缩放后的width和height

场景 : 图片 自适应不同显示器 width : 100%

场景二 : 图片上 定位了一个导航, 要与图片缩放大小 的 height 同步

思路: 获取图片变化的height 给 nav 导航

解决:

     <el-carousel :interval="5000" arrow="hover" :height="img_height + 'px'" :loop="true">
        <el-carousel-item v-for="item in bannerItem" :key="item.ad_id">
          <el-image
            :src="item.image_url"
            alt=""
            style="width:100%;cursor:pointer"
            @click="Jump(item.link_url)"
            @load="img_load"
            ref="img_ref"
            id="test"
          ></el-image>
        </el-carousel-item>
      </el-carousel>

步骤二 图片加载函数 获取图片高度

 img_load() {
      var _test = document.getElementById('test') //若是jq，则直接将此代码换成 var _test = $("#test"); 即可。
      this.$nextTick(() => {
        this.img_height = _test.clientHeight
      })
    },

步骤三 将高度height 同步给 导航 nav

步骤四 不同的 显示器切换时 nav 加载一次后 不再变化

监听屏幕宽度变化 再去给 height 赋值 新的图片高度

注销window.onresize事件

  destroyed() {
    window.onresize = null
  },