微信小程序之image組件
小程序image支持 JPG、PNG、SVG、WEBP、GIF 等格式;image組件默認寬度320px、高度240px;且支持懶加載;小程序要求圖片打包上線的大小不能超過2M,所以很多靜態(tài)資源放在網(wǎng)絡上會比較好,在小程序調用相應的圖片鏈接就好(圖片資源可以放在自己的網(wǎng)站進行管理
一、src指定要加載的圖片的路徑
圖片存在默認的寬度和高度 320*240
二、mode 決定 圖片內容 如何 和圖片標簽寬高做適配
1) scaleToFill 縮放模式,不保持縱橫比縮放圖片,使圖片的寬高完全拉伸至填滿 image 元素
2) aspectFit 保持寬高比 確保圖片的長邊 顯示出來 頁面輪播圖,常用
3)aspectFill 保持縱橫比縮放圖片,只保證圖片的 短邊能完全顯示出來,用的比較少
4)widthFix 寬度指定了之后,高度會自己按比例來調整,常用
5)top,bottom,center,top left,top right類似于css中的background-position;不縮放圖片,只挪動位置
三、小程序當中的圖片 直接支持懶加載,需要在image標簽添加lazy-load屬性;小程序會自己判斷 當圖片 出現(xiàn)在 視口 上下三屏的高度 之內的時候,會自行加載圖片
<!-- image圖片組件 --> <block wx:for="{{imgMode}}" wx:key="index"> <view>下邊圖片的mode屬性為:{{item}}</view> <image src="{{imgUrl}}" mode="{{item}}" lazy-load></image> </block>
如果您的問題還未解決可以聯(lián)系站長付費協(xié)助。

有問題可以加入技術QQ群一起交流學習
本站vip會員 請加入無憂模板網(wǎng) VIP群(50604020) PS:加入時備注用戶名或昵稱
普通注冊會員或訪客 請加入無憂模板網(wǎng) 技術交流群(50604130)
客服微信號:15898888535
聲明:本站所有文章資源內容,如無特殊說明或標注,均為采集網(wǎng)絡資源。如若內容侵犯了原著者的合法權益,可聯(lián)系站長刪除。