Vue中获取图片高度问题及解决

一.问题描述

在使用Vue2开发移动端页面的时候，需要做一个效果，实现的方案是背景渐变，但是想要实现这个效果就必须进行定位，然后设置z-index让这个元素在其他元素的下面，我的背景高度需要在一个十分恰当的位置，在这个背景上面还有另外一张图片，但是我的图片会随着移动端页面的变化而发生高度的变化，为什么会变化哪？因为我设置了图片的宽度为100%这样就有可能导致，背景的位置在宽屏的情况下和UI差距比较大，所以我需要获取图片的高度，然后在这个高度上增加合适的高度就可以在任何屏幕中自适应，但是无论我在mounted中如何获取，甚至在$nextTick中获取到的图片高度都是0，导致一直无法实现自己想要的效果，以上描述的效果基本如下：

二.问题分析

出现这个问题的点在于，进行背景设置的元素，是定位的，所以脱离了标准流，导致它的高度无法被撑起来，并且也不能撑起来，因为它的高度是一个比较特殊的高度，所以只能进行定位，但是又因为图片的高度变化，导致背景一个固定的值不能满足要求，解决方案是动态获取图片的高度然后相应的去设置背景元素的高度，比较坑的地方就在于直接在mounted和$nextTick中拿不到高度，原因在于图片未加载完成，所以需要在图片完全加载后进行后续的处理。

三.问题解决

解决方案一： 使用JS的方式进行获取图片高度，在图片高度的基础上动态设置背景高度。

js 复制代码

methods: {
  handleImageLoad(event) {
    const height = event.target.offsetHeight;
    this.height1 = height + 120;
  },

  getPicHeight() {
    this.height1 = this.$refs.myPictrue.offsetHeight + 120;
  },
},

  mounted() {
    window.addEventListener("resize", () => {
      this.getPicHeight();
    });
  },

  beforeDestroy() {
    window.removeEventListener("resize", this.getPicHeight);
  },

解决这个问题的方法就是使用 @load="handleImageLoad"当图片加载完毕之后就会直接出发这个方法中的逻辑进行处理，然后获取高度来让背景跟随图片高度进行变化。

解决方案二： 手动计算图片比例，使用vw进行动态计算。

css 复制代码

.img {
  width: 100vw;
  height: 40vw;
  position: relative;
  z-index: 9;
  background-color: red;
}
.img-bg {
  width: 100vw;
  position: absolute;
  top: 0;
  left: 0;
  height: calc(40vw + 120px);
  background-color: green;
}

四.问题总结

这个问题其实本质原因还是对不同内容加载完成时机不够清楚，因为在开发过程中有时候确实不太会去考虑拿到图片的高度，但是其实使用vw来解决这个问题其实是更好的，它的缺点在于需要自己去计算宽高比，但是本着不写代码就不会有bug的原则，能够尽量使用纯CSS解决的问题就用纯CSS来解决。