Vue中获取图片高度的两种方法

一.问题描述

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

二.问题分析

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

三.问题解决

解决方案一： 使用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进行动态计算。

.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来解决。

到此这篇关于Vue中获取图片高度的两种方法的文章就介绍到这了,更多相关Vue中获取图片高度内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论