WeChat Open Platform

Mini Programs Documentation

image

Images

Attribute name Type Default value Description
src String Image resource address
mode String 'scaleToFill' Image cropping and zoom modes
binderror HandleEvent The event name released on AppService when an error occurs, event object event.detail = {errMsg: 'something wrong'}
bindload HandleEvent Event name released to AppService when image loading is complete, image object event.detail = {height: 'image height px', width: 'image width px'}

Note: Image component default width is 300px, default height is 225px.

mode valid values:

There are 13 modes, of which 4 are zoom modes and 9 are crop modes.

Mode Value Description
Zoom scaleToFill Image zoom that does not maintain aspect ratio, stretches height and width of image to completely fill image element
Zoom aspectFit Image zoom that maintains aspect ratio, enables long edge of image to be fully displayed. In other words, the image can be fully displayed.
Zoom aspectFill Image zoom that maintains aspect ratio, only ensures that short edge of image can be fully displayed. In other words, an image that is normally horizontal or vertical will be complete, but it will be cut if it faces the other direction.
Zoom widthFix Width is fixed while height changes automatically, original image aspect ratio remains unchanged
Crop top Does not zoom image, only displays top area of image
Crop bottom Does not zoom image, only displays bottom area of image
Crop center Does not zoom image, only displays center area of image
Crop left Does not zoom image, only displays left area of image
Crop right Does not zoom image, only displays right area of image
Crop top left Does not zoom image, only displays top left area of image
Crop top right Does not zoom image, only displays top right area of image
Crop bottom left Does not zoom image, only displays bottom left area of image
Crop bottom right Does not zoom image, only displays bottom right area of image

Example:

<view class="page">
  <view class="page__hd">
    <text class="page__title">image</text>
    <text class="page__desc">Image</text>
  </view>
  <view class="page__bd">
    <view class="section section_gap" wx:for="{{array}}" wx:for-item="item">
      <view class="section__title">{{item.text}}</view>
      <view class="section__ctn">
        <image style="width: 200px; height: 200px; background-color: #eeeeee;" mode="{{item.mode}}" src="{{src}}"></image>
      </view>
    </view>
  </view>
</view>
Page({
  data: {
    array: [{
      mode: 'scaleToFill',
      text: 'scaleToFill: Image zoom that does not maintain aspect ratio and completely adapts image'
    }, { 
      mode: 'aspectFit',
      text: 'aspectFit: Image zoom that maintains aspect ratio, enables long edge of image to be fully displayed'
    }, { 
      mode: 'aspectFill',
      text: 'aspectFill: Image zoom that maintains aspect ratio, only ensures that short edge of image can be fully displayed'
    }, { 
      mode: 'top',
      text: 'top: Does not zoom image, only displays top area of image' 
    }, {      
      mode: 'bottom',
      text: 'bottom: Does not zoom image, only displays bottom area of image'
    }, { 
      mode: 'center',
      text: 'center: Does not zoom image, only displays center area of image'
    }, { 
      mode: 'left',
      text: 'left: Does not zoom image, only displays left area of image'
    }, { 
      mode: 'right',
      text: 'right: Does not zoom image, only displays right area of image'
    }, { 
      mode: 'top left',
      text: 'top left: Does not zoom image, only displays top left area of image 
    }, { 
      mode: 'top right',
      text: 'top right: Does not zoom image, only displays top right area of image'
    }, { 
      mode: 'bottom left',
      text: 'bottom left: Does not zoom image, only displays bottom left area of image'
    }, { 
      mode: 'bottom right',
      text: 'bottom right: Does not zoom image, only displays bottom right area of image'
    }],
    src: '../../resources/cat.jpg'
  },
  imageError: function(e) {
    console.log('image3 has experienced an error event, the value brought is', e.detail.errMsg)
  }
})
Original image

image

scaleToFill

Image zoom that does not maintain aspect ratio and completely adapts image

image

aspectFit

Image zoom that maintains aspect ratio, enables long edge of image to be fully displayed

image

aspectFill

Image zoom that maintains aspect ratio, only ensures that short edge of image can be fully displayed

image

top

Does not zoom image, only displays top area of image

image

bottom

Does not zoom image, only displays bottom area of image

image

center

Does not zoom image, only displays center area of image

image

left

Does not zoom image, only displays left area of image

image

Does not zoom image, only displays right area of image

image

top left

Does not zoom image, only displays top left area of image

image

top right

Does not zoom image, only displays top right area of image

image

bottom left

Does not zoom image, only displays bottom left area of image

image

bottom right

Does not zoom image, only displays bottom right area of image

image