小程序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> |
相关阅读：
