Vue中獲取圖片高度的兩種方法

更新時間：2024年08月01日 09:28:10 作者：一溪風月

在使用Vue2開發(fā)移動端頁面的時候,需要做一個效果,實現(xiàn)的方案是背景漸變,但是想要實現(xiàn)這個效果就必須進行定位,我的背景高度需要在一個十分恰當?shù)奈恢?但是我的圖片會隨著移動端頁面的變化而發(fā)生高度的變化,為什么會變化？所以本文介紹了Vue中獲取圖片高度的方法

一.問題描述

在使用Vue2開發(fā)移動端頁面的時候，需要做一個效果，實現(xiàn)的方案是背景漸變，但是想要實現(xiàn)這個效果就必須進行定位，然后設置z-index讓這個元素在其他元素的下面，我的背景高度需要在一個十分恰當?shù)奈恢?，在這個背景上面還有另外一張圖片，但是我的圖片會隨著移動端頁面的變化而發(fā)生高度的變化，為什么會變化哪？因為我設置了圖片的寬度為100%這樣就有可能導致，背景的位置在寬屏的情況下和UI差距比較大，所以我需要獲取圖片的高度，然后在這個高度上增加合適的高度就可以在任何屏幕中自適應，但是無論我在mounted中如何獲取，甚至在$nextTick中獲取到的圖片高度都是0，導致一直無法實現(xiàn)自己想要的效果，以上描述的效果基本如下：

二.問題分析

出現(xiàn)這個問題的點在于，進行背景設置的元素，是定位的，所以脫離了標準流，導致它的高度無法被撐起來，并且也不能撐起來，因為它的高度是一個比較特殊的高度，所以只能進行定位，但是又因為圖片的高度變化，導致背景一個固定的值不能滿足要求，解決方案是動態(tài)獲取圖片的高度然后相應的去設置背景元素的高度，比較坑的地方就在于直接在mounted和$nextTick中拿不到高度，原因在于圖片未加載完成，所以需要在圖片完全加載后進行后續(xù)的處理。

三.問題解決

解決方案一： 使用JS的方式進行獲取圖片高度，在圖片高度的基礎上動態(tài)設置背景高度。

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"當圖片加載完畢之后就會直接出發(fā)這個方法中的邏輯進行處理，然后獲取高度來讓背景跟隨圖片高度進行變化。

解決方案二： 手動計算圖片比例，使用vw進行動態(tài)計算。

.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;
}