切換語言為:簡體
Vue中獲取圖片高度時遇到的問題及解決方法

Vue中獲取圖片高度時遇到的問題及解決方法

  • 爱糖宝
  • 2024-07-27
  • 2073
  • 0
  • 0

一.問題描述


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

Vue中獲取圖片高度時遇到的問題及解決方法

二.問題分析


Vue中獲取圖片高度時遇到的問題及解決方法

出現這個問題的點在於,進行背景設定的元素,是定位的,所以脫離了標準流,導致它的高度無法被撐起來,並且也不能撐起來,因為它的高度是一個比較特殊的高度,所以只能進行定位,但是又因為圖片的高度變化,導致背景一個固定的值不能滿足要求,解決方案是動態獲取圖片的高度然後相應的去設定背景元素的高度,比較坑的地方就在於直接在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來解決。

0則評論

您的電子郵件等資訊不會被公開,以下所有項目均必填

OK! You can skip this field.