我們知道在微信小程式中是無法直接為view設定本機圖片的。那我們要怎麼解決這個問題呢?
(學習影片分享:程式設計入門)
解決方法如下:
1、使用網路圖片
2、使用base64格式
3、使用image來裝載本地的圖片,然後作為介面背景
前面兩種都很簡單,下面我們重點來講講第三種。一般大家的苦惱都是這麼把imageview放到介面的最下面。那麼下面就直接上程式碼。
wxml
<view class="root"> <image class='background-image' src='../res/login_bg.png' mode="aspectFill"></image> <view class="content"> </view> </view>
wxss
.root { width: 100%; height: 100%; background-color: #70c7da; position: relative; } .background-image{ height : 100%; position: absolute; width: 100%; left: 0px; top: 0px; } .content{ position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; }
好了,搞定。只要用相對佈局,就可以實現了。類似android的相對佈局。現在只要把內容全部寫道content中就行了
相關推薦:小程式開發教學
#以上是怎麼把本地圖片當成小程式背景的詳細內容。更多資訊請關注PHP中文網其他相關文章!