小程序 背景圖在開發工具上顯示，但是在真機調試時無效

1 場景

小程序在調用wx.getUserInfo獲取用戶信息時，必須要用戶授權，獲取地理位置時也需要授權。在應用中，每次讓用戶點擊按鈕后，彈出授權框，用戶體驗不太好，因此做了優化。

在第一次授權獲取用戶信息后，彈出模態框用來獲取手機號，授權獲取手機號后，再獲取地理位置。在模態框背面我們采用了一張進入信息頁的高斯模糊圖。

 

 

 2 問題及解決

但是在加入后，發現在開發工具中可以顯示，但是真機調試時，沒有實現效果。后來搜索，發現是 引用本地的圖片的原因造成的，沒有對本地圖片進行解析。把圖片換成網絡圖片即可。（可把圖片放到服務器上或者上傳到網上）。

3 代碼

    <div class="cu-modal " :class="{ show: modalName }" style="background-image:url(https://XXX.png);background-size:cover">
      <div class="cu-dialog">
        <div class="padding-top-xl padding-lr-xl">
          <swiper
            class="card-swiper square-dot"
            indicator-dots="true"
            circular="true"
            autoplay="true"
            interval="5000"
            duration="500"
            indicator-color="#8799a3"
            indicator-active-color="#0081ff"
          >
            <swiper-item v-for="(i, index) in bagImg" :key="index" class="cur">
              <view
                class="bg-img shadow-blur"
                :style="{
                  backgroundImage: 'url(' + i + ')',
                  backgroundSize: 'contain',
                }"
              ></view>
            </swiper-item>
          </swiper>
        </div>
        <div class="content">專屬特權</div>
        <div class="cu-bar justify-end">
          <div class="flex margin-sm padding-sm" style="width: 100%;">
            <div
              class="flex-sub text-center"
              v-for="(excluIcon, excluIndex) in exclusiveList"
              :key="excluIndex"
            >
              <img
                :src="excluIcon.url"
                alt
                class="icon-set"
                style="width: 40px; height: 40px;"
              />
              <span class="text-sm icon-text-padding">
                <i class="text-blank">{{ excluIcon.name }}</i>
              </span>
            </div>
          </div>
        </div>
        <button
          class="margin-tb-xl cu-btn bg-blue lg block margin-lr-xl"
          v-if="isgetPhone"
          open-type="getPhoneNumber"
          @getphonenumber="getPhoneNumber"
        >
          獲取專屬客戶經理
        </button>
        <button
          class="margin-xl cu-btn bg-blue lg"
          v-if="getLocations"
          open-type="getLocation"
          @click="getLocation"
        >
          獲取附近客戶經理
        </button>
      </div>
    </div>