Vue2常用功能總結(3) - 動態設置背景圖片

日常開發中，經常會遇到一些需求，需要動態設置背景圖片，如：不同場景使用不同背景圖【宣傳類需求】；相同配置，但所屬不同，也需要設置不同背景圖以示區別【項目一對多上線】；以及客戶需要自定義背景圖片 等等。

遇到這種情況時你總不能給客戶說，你先把背景圖發給我，我配置在項目里面，然后給你發版，那不僅客戶要瘋，估計運維和領導都覺得你瘋了，因此動態設置背景圖片是最好的方式。

動態設置背景圖片 主要是分兩步：1、模板動態樣式配置及對應參數設置；2、圖片獲取，對應參數賦值

1、模板動態樣式配置及對應參數設置

模板動態樣式配置，樣式參數設置【這里尤其注意 backgroundImage屬性 url 的拼接】

<template>
  <div class="el-col el-col-24  position-absolute" :style="{ backgroundImage: `url(${loginBackground})` }"></div>
</template>

data() {
  return {
    loginBackground: null // backgroundImage參數地址
  }
},

<style scoped lang="less">
.position-absolute {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-size: cover;
  background-position: 50% 0px;
  background-repeat: no-repeat no-repeat;
}
</style>

2、圖片獲取

2.1 網絡圖片

• 網絡圖片顧名思義就是圖片資源來源於網絡 或 系統內預先設置好的圖片使用時返回一個可以直接進行訪問的圖片鏈接。
• 這一步一般需要請求接口，通過接口返回圖片地址(畢竟就算是網絡圖片，那肯定也是特定的圖片地址，而且是固定的圖片地址，不可能真的網上隨便找一張)

  getSysConfigList() {
    let config = ['manager_login_background']
    this.$http.cp_public.getSysConfigList({ config: config.join(',') }).then(res => {
      let resData = res ? res : null
      if (resData) {
        this.loginBackground = resData[0].value ? resData[0].value : constLoginBackground  // 根據獲取到的參數進行判定是加載網絡圖片還是本地圖片
      }
    })
  }

系統內配置圖片顯示

2.2 本地圖片讀取

• 動態設置背景圖片，如果該背景圖片的參數來源是必設或必填項還好，就怕不是必填項【實際過程中，經常是非必填的】，那就需要在系統內設置一張默認圖片或默認圖片地址 以備系統能夠正常使用，否則背景一片白板，就非常尷尬。
• 默認圖片地址不管是網絡圖片地址還是自身數據庫內默認的圖片返回地址，本質上都是網絡圖片地址，因此使用方式都跟網絡圖片的使用是一樣的，此處介紹本地圖片地址使用。

　　2.2.1 導入本地圖片

• 導入本地圖片可以 require(‘xxxx.png’)，也可以 import xxxx from 'xxxx.png'，導入效果是一樣的。

  // import constLoginBackground from '../../assets/images/loginBgpng.png'    // import導入
  
  const constLoginBackground = require('../../assets/images/loginBgpng.png')  // require引入

　　2.2.2 本地圖片使用

• 因為是動態設置背景圖片，網絡圖片或系統內參數配置圖片肯定是首要選擇，本地圖片是備用選擇，因此需要先請求接口，獲取網絡圖片或系統內參數配置圖片地址，再根據獲取到的參數進行判定是加載網絡圖片還是本地圖片。

  getSysConfigList() {
    let config = ['manager_login_background']
    this.$http.cp_public.getSysConfigList({ config: config.join(',') }).then(res => {
      let resData = res ? res : null
      if (resData) {
        this.loginBackground = constLoginBackground // 直接使用本地圖片
      }
    })
  }

本地圖片加載顯示

3、注意與總結

3.1 注意1

• 如上所述，既然在系統內背景圖片參數為非必填項【即未設置默認背景圖片】時需要加載並顯示本地圖片，那我可不可以在寫模板時直接一個三目運算符判定，系統配置背景圖片地址存在時加載配置背景圖片，否則加載本地圖片，答案是：不行。如下所示：

  <template>
    <div
      class="el-col el-col-24  position-absolute"
      :style="{ backgroundImage: `url(${loginBackground ? loginBackground : constLoginBackground})` }"
    ></div>
  </template>

• 原因是：這種情況會導致一個問題，即頁面剛開始加載時接口請求尚未返回，系統內是否配置了背景圖片尚不知曉，此時頁面構建和顯示時三目運算符判定 loginBackground 為假，就會直接顯示本地圖片。而后接口請求回來了，如果系統內沒有配置背景圖片，那還好，都顯示完了也就不用動了；但如果系統內配置背景圖片，這就尷尬了，此時背景圖片地址一替換，就會重新獲取圖片並顯示，頁面就會出現閃爍。
• 解決方案：既不想背景圖片閃爍替換顯示，又不想沒有背景圖片，則可以采用上面 2.1 所述，先默認 loginBackground 參數值為空，在接口請求返回之前不做背景圖片顯示，等到接口返回后，再根據接口返回的參數進行相應判定，繼而給 loginBackground賦予不同的值

3.2 注意2

• 如上 3.1所述，反正你要閃爍就閃爍嘛，要切換就切換嘛，我不在意都能接受，既然你都三目運算符判定加載了，那我是不是也不需要 require('xxxx.png') 和 import xxxx from 'xxxx.png'  圖片了，直接寫圖片的相對地址，答案是：不行。如下所示：

  <template>
    <div
      class="el-col el-col-24  position-absolute"
      :style="{ backgroundImage: `url(${loginBackground ? loginBackground : '../../assets/images/loginBgpng.png'})` }"
    ></div>
  </template>

• 原因是：這種相對地址寫法打包后項目找不到圖片位置(圖片實際位置和參數地址對不上)，如下所示：
  

項目打包后，該圖片 實際地址為 dist/static/img/loginBgpng.184946ca.png

而項目代碼里面的地址還是之前的相對地址，這下不僅地址對不上了，連文件名都對不上了

• 從上面兩張圖可以看出，直接寫圖片的相對地址也是不行的，會導致圖片因圖片地址和文件名的改變而找不到對應的圖片，從而顯示不出來。

3.3 總結

• 如上綜合所述，動態設置背景圖片有好處，但也有坑需要注意。