我們知道襟交，在PC端，想在一個(gè)頁面插入一張背景圖择浊，只需要如下屬性即可拐云。
background-image: url("../images/photo.png");
在小程序里面，如此做法就行不通了近她，圖片不但不會(huì)顯示而且還會(huì)報(bào)錯(cuò)了
pages/index/index.wxss 中的本地資源圖片無法通過 WXSS 獲取叉瘩，可以使用網(wǎng)絡(luò)圖片，或者 base64粘捎，或者使用<image/>標(biāo)簽薇缅。
很多人都會(huì)有這樣的一種感受危彩，在一邊學(xué)習(xí)一遍做項(xiàng)目的過程中，總會(huì)遇到很多坑泳桦，今天給大家填坑汤徽，如何給小程序頁面插入一張背景圖。
參考了一下小程序的參考手冊(cè)：https://www.w3cschool.cn/weixinapp/weixinapp-qa.html
在網(wǎng)上瀏覽了一遍灸撰，找到了幾個(gè)比較靠譜的解決方案谒府，簡(jiǎn)單方便。
解決方案：
解決方法一：
在使用背景圖片的時(shí)候用網(wǎng)絡(luò)圖片浮毯，就是用外鏈的形式完疫，比如你將這張圖片放到你的服務(wù)器，如：https://xxxx/xxx.jpg债蓝；
1：用工具連接服務(wù)器
2：將桌面的圖片拖入指定服務(wù)器文件夾底下
3：得到圖片網(wǎng)絡(luò)連接壳鹤，添加到代碼中，則可以顯示背景圖片
解決方法二：
將背景圖片使用編碼base64進(jìn)行轉(zhuǎn)換饰迹，可以在這個(gè)網(wǎng)址進(jìn)行http://tool.css-js.com/base64.html 轉(zhuǎn)換芳誓，如：background-image: url("轉(zhuǎn)換后得到的編碼文本")，如果多次使用的話可以將該值設(shè)置為全局變量啊鸭，再在js文件進(jìn)行引用即可锹淌；
1：打開在線圖片轉(zhuǎn)換平臺(tái)
2：將桌面的圖片導(dǎo)入，生成base64編碼
3：將第三方平臺(tái)編譯過后的base64編碼復(fù)制到wxss里面
// Base64 在wxss中的使用
page{
background-image: url("data:image/jpg;base64,/9j/4AAQSkZJRgABAQEA....");
}
4：效果如下：
缺點(diǎn)就是赠制，這一大串編碼太占用我們的代碼空間了葛圃，鼠標(biāo)要拖動(dòng)許久許久，難免產(chǎn)生視覺疲勞憎妙。
下一章，小程序的圖片的使用教程
原文作者：祈澈姑娘
技術(shù)博客：http://www.reibang.com/u/05f416aefbe190后前端妹子曲楚，愛編程厘唾，愛運(yùn)營(yíng)，愛折騰龙誊。
堅(jiān)持總結(jié)工作中遇到的技術(shù)問題抚垃，堅(jiān)持記錄工作中所所思所見，歡迎大家加入群聊趟大，一起探討交流鹤树。
