小程序image支持 JPG、PNG、SVG、WEBP、GIF 等格式;image组件默认宽度320px、高度240px;且支持懒加载;小程序要求图片打包上线的大小不能超过2M,所以很多静态资源放在网络上会比较好,在小程序调用相应的图片链接就好(图片资源可以放在自己的网站进行管理
一、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属性;小程序会自己判断 当图片 出现在 视口 上下三屏的高度 之内的时候,会自行加载图片
<!-- image图片组件 --> <block wx:for="{{imgMode}}" wx:key="index"> <view>下边图片的mode属性为:{{item}}</view> <image src="{{imgUrl}}" mode="{{item}}" lazy-load></image> </block> |