微信小程序圖片使用示例
微信小程序圖片開(kāi)發(fā)一般包括加載本地圖片,加載服務(wù)器圖片,已經(jīng)背景圖,那么微信小程序下面為大家介紹圖片處理的常用的小程序圖片使用樣式。
1:加載本地文件夾圖片
- <image src="/image/pig.jpg" mode="aspectFill">
- </image>
2:加載服務(wù)器圖片
wxml:
- <image src="{{imageUrl}}" mode="aspectFill">
- </image>
js:
- Page({
- data: {
- imageUrl: "http://www.intmote.com/timg.jpg",
- },
g 或者直接在wxml寫(xiě)代碼:
- <image src="http://www.intmote.com/timg.jpg" mode="aspectFill">
- </image>
3:給小程序頁(yè)面加載一張背景圖片
方法一: 使用背景圖片的時(shí)候用網(wǎng)絡(luò)圖片,就是用外鏈的形式,比如你將這張圖片放到你的服務(wù)器。
方法二: 將背景圖片使用編碼base64進(jìn)行轉(zhuǎn)換,可以在這個(gè)網(wǎng)址進(jìn)行http://tool.css-js.com/base64.html 轉(zhuǎn)換,如:background-image: url("轉(zhuǎn)換后得到的編碼文本"),如果多次使用的話(huà)可以將該值設(shè)置為全局變量,再在js文件進(jìn)行引用即可;
90后前端妹子,愛(ài)編程,愛(ài)運(yùn)營(yíng),愛(ài)折騰。 堅(jiān)持總結(jié)工作中遇到的技術(shù)問(wèn)題,堅(jiān)持記錄工作中所所思所見(jiàn),歡迎大家加入群聊,一起探討交流。