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

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

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

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


很多人都會有這樣的一種感受,在一邊學習一遍做專案的過程中,總會遇到很多坑,今天給大家填坑,如何給小程式頁面插入一張背景圖。
參考了一下小程式的參考手冊:https://www.w3cschool.cn/weixinapp/weixinapp-qa.html

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

解決方案:

解決方法一:

在使用背景圖片的時候用網路圖片,就是用外鏈的形式,比如你將這張圖片放到你的伺服器,如: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”,拉你程序序員技術討論群