小程序image支持 JPG、PNG、SVG、WEBP、GIF 等格式;image組件默認(rèn)寬度320px、高度240px;且支持懶加載;小程序要求圖片打包上線的大小不能超過2M,所以很多靜態(tài)資源放在網(wǎng)絡(luò)上會比較好,在小程序調(diào)用相應(yīng)的圖片鏈接就好(圖片資源可以放在自己的網(wǎng)站進(jìn)行管理
一、src指定要加載的圖片的路徑
圖片存在默認(rèn)的寬度和高度 320*240
二、mode 決定 圖片內(nèi)容 如何 和圖片標(biāo)簽寬高做適配
1) scaleToFill 縮放模式,不保持縱橫比縮放圖片,使圖片的寬高完全拉伸至填滿 image 元素
2) aspectFit 保持寬高比 確保圖片的長邊 顯示出來 頁面輪播圖,常用
3)aspectFill 保持縱橫比縮放圖片,只保證圖片的 短邊能完全顯示出來,用的比較少
4)widthFix 寬度指定了之后,高度會自己按比例來調(diào)整,常用
5)top,bottom,center,top left,top right類似于css中的background-position;不縮放圖片,只挪動位置
三、小程序當(dāng)中的圖片 直接支持懶加載,需要在image標(biāo)簽添加lazy-load屬性;小程序會自己判斷 當(dāng)圖片 出現(xiàn)在 視口 上下三屏的高度 之內(nèi)的時候,會自行加載圖片
<!-- image圖片組件 --> <block wx:for="{{imgMode}}" wx:key="index"> <view>下邊圖片的mode屬性為:{{item}}</view> <image src="{{imgUrl}}" mode="{{item}}" lazy-load></image> </block> |
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務(wù)