小程序 背景图在开发工具上显示，但是在真机调试时无效

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>