本人是前端菜鳥一個,比小白還要白,這完全是自己的經驗總結,并不是要給各位分享什么寶貴經驗哈,各位大佬不喜勿噴,不然會打擊到我的哈哈
因為公司要求做幾個小程序的頁面,我不得不拾起丟棄了幾個月的小程序開發,但我也不是有很豐富的小程序開發經驗,算是入門級別吧
問題描述:在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個文件都放在根目錄就可以了,例如
問題迎刃而解。。。。。