image

Image.

Attribute NametypeDefaultDescriptionMinimum Version
srcStringimage address (Support image type: png, jpeg)
modeStringscaleToFillimage mode
classStringexternal style
styleStringInline style
onLoadEventHandletrigger upon image loading completion, event object event.detail = {height:'image height px', width:'image width px'}
onErrorEventHandletrigger on image loading error, event object event.detail = {errMsg: 'something wrong'}
onTapEventHandleTriggered when clicking on an image, and 
pass click events to the parent component
catchTapEventHandleTriggered when clicking on an image, and do not pass click events to the parent component

Note: The image component has default width 300px and height 225px

mode

There are 13 modes, 4 of which are scaling mode and 9 are cropping mode.

Scaling Mode

Attribute NameDescription
scaleToFillscale without aspect ratio and stretch image width to fill the image element
aspectFitscale with aspect ratio and show fully long side In other words, the whole image is displayed in full.
aspectFitscale with aspect ratio and ensure short side to be displayed fully. In other words, the image is complete in horizontal or vertical direction, and the other direction is cropped.
widthFixwidth not changed and height changed automatically with aspect ratio unchanged

Cropping Mode

Attribute nameDescription
topNot scaling image, showing only top area
bottomNot scaling image, showing only bottom area
centerNot scaling image, showing only central area
leftNot scaling image, showing only left area
rightNot scaling image, showing only right area
top leftNot scaling image, showing only top left area
top rightNot scaling image, showing only top right area
bottom leftNot scaling image, showing only bottom left area
bottom rightNot scaling image, showing only bottom right area

Note: The image height cannot be set as auto. If the image height has to be auto, just set mode as widthFix.

Sceenshot

Original Image

image

scaleToFill

Fit image completely without maintaining aspect ratio
image

aspectFit

Scale with aspect ratio and show fully long side
image

aspectFill

Scale with aspect ratio and ensure short side to be displayed fully.
image

widthFix

Width not changed and height changed automatically with aspect ratio unchanged
image

top

Not scaling image and showing only top area
image

bottom

Not scaling image and showing only bottom area
image

center

Not scaling image and showing only central area
image

left

Not scaling image and showing only left area
image

Not scaling image and showing only right area
image

top left

Not scaling image and showing only top left area
image

top right

Not scaling image and showing only right top area
image

bottom left

Not scaling image and showing only bottom left area
image

bottom right

Not scaling image and showing only bottom right area
image

Sample Code

copy
<view class="section" a:for="{{array}}" a:for-item="item">
  <view class="title">{{item.text}}</view>
  <image style="background-color: #eeeeee; width: 300px; height:300px;" mode="{{item.mode}}" src="{{src}}" onError="imageError" onLoad="imageLoad" />
</view>
copy
Page({
  data: {
    array: [{
      mode: 'scaleToFill',
      text: 'scaleToFill: scale without aspect ratio and fit image completely’
    }, {
      mode: 'aspectFit',
      text: 'aspectFit: scale with aspect ratio and show fully long side’
    }, {
      mode: 'aspectFill',
      text: 'aspectFill: scale with aspect ratio and ensure short side to be displayed fully.’
    }, {
      mode: 'top',
      text: 'top: Not scaling image, showing only top area’
    }, {
      mode: 'bottom',
      text: 'bottom: Not scaling image, showing only bottom area’
    }, {
      mode: 'center',
      text: 'center: Not scaling image, showing only central area’
    }, {
      mode: 'left',
      text: 'left: Not scaling image, showing only left area’
    }, {
      mode: 'right',
      text: ‘right: Not scaling image, showing only right area’
    }, {
      mode: 'top left',
      text: ‘top left: Not scaling image, showing only top left area’
    }, {
      mode: 'top right',
      text: ‘top right: Not scaling image, showing only top right area’
    }, {
      mode: 'bottom left',
      text: ‘bottom left: Not scaling image, showing only bottom left area’
    }, {
      mode: 'bottom right',
      text: ‘bottom right: Not scaling image, showing only bottom right area’
    }],
    src: './2.png'
  },
  imageError: function (e) {
    console.log('image3 error happened', e.detail.errMsg)
  },
  imageLoad: function (e) {
    console.log('image loaded successfully', e);
  }
})