本人是前端菜鳥一個，比小白還要白，這完全是自己的經驗總結，并不是要給各位分享什么寶貴經驗哈，各位大佬不喜勿噴，不然會打擊到我的哈哈

因為公司要求做幾個小程序的頁面，我不得不拾起丟棄了幾個月的小程序開發，但我也不是有很豐富的小程序開發經驗，算是入門級別吧

問題描述：在wxss文件引入背景圖片不成功

因為小程序的首頁就要用到背景圖片，所以一開始我就卡死了。根據以往html開發經驗，我們只要在css文件某個div的屬性background-image這里引入背景圖片就行。but...，然并卵，小程序出現這樣的錯誤，文檔解析

對的，這個錯誤提示已經很明顯了，本地資源圖片無法通過 WXSS 獲取，可以使用網絡圖片，或者 base64，或者使用<image/>標簽。提到的第一個方法，就是把圖片上傳到服務器，用服務器上圖片的鏈接代替，這個方法比較麻煩，我就放棄了。第二個方法就是轉換成base64

然后把編碼全部拷貝放到屬性background-image當中，即background-image:url("編碼")。這個方法雖說挺簡單方便，但是一大串編碼放到wxss文件當中，會造成視覺疲勞，更有密集恐懼這恐怕會摔電腦吧哈哈，所以只能另辟蹊徑。我想既然不能在wxss文件中引入本地資源圖片，那在wxml文件總可以吧，這時候我想到了行內樣式，像這樣

<view class='banner' style="background-image:url('asset/images/banner.jpg');">復制代碼

果不其然，成功了，背景圖片終于顯示出來了，爽歪歪.....可惜是我高興得太早了。正當我打開手機預覽頁面時，我又要崩潰了，背景圖片顯示不出來。。。。。

問題描述：背景圖片在開發者工具中可以顯示，在真機上看不到

我又上網找解決方法，后來發現只要把那個頁面的4個文件都放在根目錄就可以了，例如

問題迎刃而解。。。。。

轉載于:https://juejin.im/post/5c98f0d86fb9a070f6534f9c

總結

以上是生活随笔為你收集整理的小程序背景图片的坑的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。