微信小程序——image图片组件

image图片组件

image.wxml文件

<view class="container">
      <view wx:for="{{array}}" wx:for-item="item">
           <view>{{item.text}}</view>
           <view>
                <image style="demoing" mode="{{item.mode}}" src="{{src}}"></image>
           </view>
      </view>
</view>

image.js文件

Page({

  /**
   * 页面的初始数据
   */
  data: {
      array:[{
        mode:'scaleToFill',
        text:'scaleToFill:不保持纵横比缩放图片，使图片完全适应'
      },{
        mode: 'aspectFit',
        text: 'aspectFit:保持纵横比缩放图片，使图片的长边能完全显示出来'
      },{
        mode: 'aspectFill',
        text: 'aspectFill:保持纵横比缩放图片，使图片的短边能完全显示出来'
      },{
        mode: 'top',
        text: 'top:不缩放图片，只显示图片的顶部区域'
      },{
        mode: 'buttom',
        text: 'buttom:不缩放图片，只显示图片的底部区域'
      },{
        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: 'buttom left',
        text: 'buttom left:不缩放图片，只显示图片的左下区域'
      },{
        mode: 'buttom right',
        text: 'buttom right:不缩放图片，只显示图片的右下区域'
      }],
      src:'../../images/cat.jpg'
  },
   imageError:function(e){
     console.log('image3发生error事件，携带值为',e.detail.errMsg)
   }
  
})

效果图