做了許久的小程序，現(xiàn)在選擇用博客記錄我遇到的問題以及問題的解決辦法，也分享給大家一些自己的心得，記錄如下：

問題描述

在微信小程序當(dāng)我們使用本地圖片作為背景圖片的時(shí)候我們會(huì)參與以下問題。
代碼：

.bg{
  width: 750rpx;
  height: 540rpx;
  background-image: url(../../images/head_bg.png);
}

在頁面使用這個(gè)樣式的時(shí)候小程序會(huì)報(bào)錯(cuò)。

解決方案

小程序背景圖片無法直接使用本地圖片。有4種解決方案：

1. 使用image組件，在布局下面蓋上一層圖片。缺點(diǎn)：布局結(jié)構(gòu)可讀性不高。
2. 將圖片通過在線轉(zhuǎn)化網(wǎng)站，轉(zhuǎn)化成base64格式。缺點(diǎn)：base64內(nèi)容太長了，影響樣式代碼閱讀。
3. ?直接通過行內(nèi)樣式解決。缺點(diǎn)：代碼看上去不夠優(yōu)雅。（最簡(jiǎn)單）
4. ?直接使用網(wǎng)絡(luò)圖片。缺點(diǎn)：需要放到服務(wù)器上。（最靈活）

建議使用第4種方法解決，雖然首次操作會(huì)有點(diǎn)麻煩，但是這樣可以增加靈活度后續(xù)可以不發(fā)版本直接替換遠(yuǎn)程圖片。

如果是公司都有服務(wù)器放一下就好了。但是我們是獨(dú)立開發(fā)，服務(wù)器怎么辦解決？別忘了，其實(shí)我們可以將圖片放在云開發(fā)的云存儲(chǔ)里面會(huì)自動(dòng)生成在線圖片鏈接。

放在云存儲(chǔ)上

1. 進(jìn)入云開發(fā)控制臺(tái)

   

2. 進(jìn)入云存儲(chǔ)空間

   

3. 拖拽圖片到云存儲(chǔ)空間，不勾選任何配置，點(diǎn)擊確定即可上傳成功了

   

4. 點(diǎn)擊文件名稱，復(fù)制文件地址

   

   
   CSS代碼：

.head-bg{
  width: 750rpx;
  height: 540rpx;
  background-image: url('https://xxxxxxxxxx.tcb.qcloud.la/head_bg.png');
  background-size: 100% 100%;
}

WXML代碼

<view>
  <!-- 頭部 -->
  <view class="head-bg" >
      <!-- 省略無關(guān)代碼 -->
  </view>
</view>

行內(nèi)樣式

當(dāng)然如果實(shí)際業(yè)務(wù)需求沒有替換圖片的需求也可以使用第3個(gè)方案，這個(gè)是最省事的方案。代碼如下：

<view>
  <!-- 頭部 -->
  <view style="background-image: url(../../../../images/head_bg.png);background-size: 100% 100%;" >
        <!-- 省略無關(guān)代碼 -->    
  </view>
</view>

Base64編碼格式

第2個(gè)方案，Base64編碼格式，先將圖片轉(zhuǎn)化成base64編碼。點(diǎn)擊傳送到base64圖片在線轉(zhuǎn)換工具

background-image:url('base64編碼')

用內(nèi)容覆蓋圖片

第1個(gè)方案，用內(nèi)容覆蓋圖片
wxml代碼

<view class="container">
  <image src='../image/head_bg.png'></image>
  <view class='content'>
    我是內(nèi)容
  </view>
</view>

wxss代碼文章來源地址http://www.zghlxwxcb.cn/news/detail-493062.html

.container{
  width: 100%;
  height: 600rpx;
  margin: 0;
  padding: 0;
  position: relative;
}
image{
  position: absolute;
  width: 100%;
  height: 600rpx;
}
.content{
  position: absolute;
  z-index: 1;
}

到了這里，關(guān)于四種方法解決微信小程序設(shè)置背景圖片，哪種最好？的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！