支付宝小程序组件图片·Image

支付宝小程序Image（图片）。

API

属性名	类型	默认值	描述
src	String	-	图片地址
mode	String	scaleToFill	图片模式
class	String	-	外部样式
style	String	-	内联样式
onError	HandleEvent	-	当图片加载错误时触发，事件对象event.detail = {errMsg: 'something wrong'}
onLoad	HandleEvent	-	图片载入完毕时触发，事件对象event.detail = {height:'图片高度px', width:'图片宽度px'}

注：image 组件默认宽度 300px、高度 225px

mode 有 13 种模式，其中 4 种是缩放模式，9 种是裁剪模式。

属性名	描述
scaleToFill	不保持纵横比缩放，使图片的宽高完全拉伸至填满 image 元素
aspectFit	保持纵横比缩放，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来
aspectFill	保持纵横比缩放，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取
widthFix	宽度不变，高度自动变化，保持原图宽高比不变

裁剪模式

属性名	描述
top	不缩放图片，只显示顶部区域
bottom	不缩放图片，只显示底部区域
center	不缩放图片，只显示中间区域
left	不缩放图片，只显示左边区域
right	不缩放图片，只显示右边区域
top left	不缩放图片，只显示左上边区域
top right	不缩放图片，只显示右上边区域
bottom left	不缩放图片，只显示左下边区域
bottom right	不缩放图片，只显示右下边区域

示例


  {{item.text}}

Page({
  data: {
    array: [{
      mode: 'scaleToFill',
      text: 'scaleToFill：不保持纵横比缩放，使图片完全适应'
    }, {
      mode: 'aspectFit',
      text: 'aspectFit：保持纵横比缩放，使图片的长边能完全显示出来'
    }, {
      mode: 'aspectFill',
      text: 'aspectFill：保持纵横比缩放，只保证图片的短边能完全显示出来'
    }, {
      mode: 'top',
      text: 'top：不缩放图片，只显示顶部区域'
    }, {
      mode: 'bottom',
      text: 'bottom：不缩放图片，只显示底部区域'
    }, {
      mode: 'center',
      text: 'center：不缩放图片，只显示中间区域'
    }, {
      mode: 'left',
      text: 'left：不缩放图片，只显示左边区域'
    }, {
      mode: 'right',
      text: 'right：不缩放图片，只显示右边边区域'
    }, {
      mode: 'top left',
      text: 'top left：不缩放图片，只显示左上边区域'
    }, {
      mode: 'top right',
      text: 'top right：不缩放图片，只显示右上边区域'
    }, {
      mode: 'bottom left',
      text: 'bottom left：不缩放图片，只显示左下边区域'
    }, {
      mode: 'bottom right',
      text: 'bottom right：不缩放图片，只显示右下边区域'
    }],
    src: './2.png'
  },
  imageError: function (e) {
    console.log('image3 发生错误', e.detail.errMsg)
  },
  imageLoad: function (e) {
    console.log('image 加载成功', e);
  }
})