微信小程序圖片使用示例

微信小程序圖片開發(fā)一般包括加載本地圖片，加載服務(wù)器圖片，已經(jīng)背景圖，那么微信小程序下面為大家介紹圖片處理的常用的小程序圖片使用樣式。

1：加載本地文件夾圖片

1. <image src="/image/pig.jpg" mode="aspectFill">
2. </image>

2:加載服務(wù)器圖片

wxml:

1. <image src="{{imageUrl}}" mode="aspectFill">
2. </image>

js:

1. Page({
2. data: {
3. imageUrl: "http://www.intmote.com/timg.jpg",
4.  
5. },

       g  或者直接在wxml寫代碼：

1. <image src="http://www.intmote.com/timg.jpg" mode="aspectFill">
2. </image>

3：給小程序頁面加載一張背景圖片

方法一：  使用背景圖片的時候用網(wǎng)絡(luò)圖片，就是用外鏈的形式，比如你將這張圖片放到你的服務(wù)器。

方法二：  將背景圖片使用編碼base64進行轉(zhuǎn)換，可以在這個網(wǎng)址進行http://tool.css-js.com/base64.html 轉(zhuǎn)換，如：background-image: url("轉(zhuǎn)換后得到的編碼文本")，如果多次使用的話可以將該值設(shè)置為全局變量，再在js文件進行引用即可；

90后前端妹子，愛編程，愛運營，愛折騰。  堅持總結(jié)工作中遇到的技術(shù)問題，堅持記錄工作中所所思所見，歡迎大家加入群聊，一起探討交流。