我們知道，在PC端，想在一個頁面插入一張背景圖，只需要如下屬性即可。

background-image: url("../images/photo.png"); 

在小程式裡面，如此做法就行不通了，圖片不但不會顯示而且還會報錯了

pages/index/index.wxss 中的本地資源圖片無法通過 WXSS 獲取，可以使用網路圖片，或者 base64，或者使用<image/>標籤。

在網上瀏覽了一遍，找到了幾個比較靠譜的解決方案，簡單方便。

解決方案：

解決方法一：

在使用背景圖片的時候用網路圖片，就是用外鏈的形式，比如你將這張圖片放到你的伺服器，如：https://xxxx/xxx.jpg；

1：用工具連線伺服器

2：將桌面的圖片拖入指定伺服器資料夾底下

3：得到圖片網路連線，新增到程式碼中，則可以顯示背景圖片

解決方法二：

將背景圖片使用編碼base64進行轉換，可以在這個網址進行http://tool.css-js.com/base64.html 轉換，如：background-image: url("轉換後得到的編碼文字")，如果多次使用的話可以將該值設定為全域性變數，再在js檔案進行引用即可；

1：開啟線上圖片轉換平臺

2：將桌面的圖片匯入，生成base64編碼

3：將第三方平臺編譯過後的base64編碼複製到wxss裡面

// Base64 在wxss中的使用
page{
  background-image: url(""data:image/jpg;base64,/9j/4AAQSkZJRgABAQEA....");
}

4：效果如下：

缺點就是，這一大串編碼太佔用我們的程式碼空間了，滑鼠要拖動許久許久，難免產生視覺疲勞。

下一章，小程式的圖片的使用教程

90後前端妹子，愛程式設計，愛運營，愛折騰。
堅持總結工作中遇到的技術問題，堅持記錄工作中所所思所見，歡迎大家加入群聊，一起探討交流。

關注「程式設計微刊」公眾號 ，在微信後臺回覆「領取資源」，獲取IT資源300G乾貨大全。公眾號回覆“1”，拉你程序序員技術討論群