微信小程序圖片使用示例

小程序官方API:https://developers.weixin.qq.com/miniprogram/dev/component/image.html

1：加載本地文件夾圖片

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

2:加載服務器圖片

wxml:

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

js:

Page({ data: { imageUrl: "http://www.intmote.com/timg.jpg", }, 

或者直接在wxml寫代碼：

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

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

方法一：
使用背景圖片的時候用網絡圖片，就是用外鏈的形式，比如你將這張圖片放到你的服務器，如：https://xxxx/xxx.jpg；

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

詳見上一篇博客：https://www.jianshu.com/p/61e6e7390f4a

注：

原文作者：祈澈姑娘技術博客：https://www.jianshu.com/u/05f416aefbe1
90后前端妹子，愛編程，愛運營，愛折騰。
堅持總結工作中遇到的技術問題，堅持記錄工作中所所思所見，歡迎大家一起探討交流。

關注「編程微刊」公眾號 ，在微信后台回復「領取資源」，獲取IT資源300G干貨大全。

公眾號回復“1”，拉你進程序員技術討論群.