微信小程序圖片使用示例
2018-05-28|HiShop
導讀:微信小程序圖片開發一般包括加載本地圖片,加載服務器圖片,已經背景圖,那么微信小程序下面為大家介紹圖片處理的常用的小程序圖片使用樣式。...
微信小程序圖片開發一般包括加載本地圖片,加載服務器圖片,已經背景圖,那么微信小程序下面為大家介紹圖片處理的常用的小程序圖片使用樣式。
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",
- },
g 或者直接在wxml寫代碼:
- <image src="http://www.intmote.com/timg.jpg" mode="aspectFill">
- </image>
3:給小程序頁面加載一張背景圖片
方法一: 使用背景圖片的時候用網絡圖片,就是用外鏈的形式,比如你將這張圖片放到你的服務器。
方法二: 將背景圖片使用編碼base64進行轉換,可以在這個網址進行http://tool.css-js.com/base64.html 轉換,如:background-image: url("轉換后得到的編碼文本"),如果多次使用的話可以將該值設置為全局變量,再在js文件進行引用即可;
90后前端妹子,愛編程,愛運營,愛折騰。 堅持總結工作中遇到的技術問題,堅持記錄工作中所所思所見,歡迎大家加入群聊,一起探討交流。
上一篇:微信小程序實現圖片雙滑縮放大小 下一篇:小程序購物車拋物線動畫的實現