小程序08-image组件

图片。支持 JPG、PNG、SVG、WEBP、GIF 等格式；image组件默认宽度320px、高度240px；且支持懒加载；小程序要求图片打包上线的大小不能超过2M，所以很多静态资源放在网络上会比较好，在小程序调用相应的图片链接就好（图片资源可以放在自己的网站进行管理；如果没有网站，也可以使用土豆图床https://images.ac.cn/上传图片）

3.1.src指定要加载的图片的路径

　　图片存在默认的宽度和高度 320*240

3.2.mode 决定 图片内容 如何 和图片标签宽高做适配

　　1) scaleToFill 缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素

　　2) aspectFit 保持宽高比 确保图片的长边 显示出来 页面轮播图，常用

　　3）aspectFill 保持纵横比缩放图片，只保证图片的 短边能完全显示出来，用的比较少

　　4）widthFix 宽度指定了之后，高度会自己按比例来调整，常用

　　5）top，bottom，center，top left，top right类似于css中的background-position；不缩放图片，只挪动位置

3.3 小程序当中的图片 直接支持懒加载，需要在image标签添加lazy-load属性；小程序会自己判断 当图片 出现在 视口 上下三屏的高度 之内的时候，会自行加载图片

<!--  image图片组件 -->
<block wx:for="{{imgMode}}" wx:key="index">
  <view>下边图片的mode属性为：{{item}}</view>
  <image src="{{imgUrl}}" mode="{{item}}" lazy-load></image>
</block>

 

Page({
  data: {
    imgUrl:'https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg',
    imgMode:['scaleToFill','aspectFit','aspectFill','widthFix','heightFix','top','bottom','center']
  },
})