微信小程式圖片使用示例

祈澈菇涼發表於2018-06-21
微信小程式

小程式官方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”，拉你程式序員技術討論群

相關文章