image

Image
Scan QR code to try:

image

Property

TypeDefaultDescription
srcStringImage address.
modeStringscaleToFillImage mode.
classStringexternal style
styleStringInline style
onLoadEventHandle Trigger 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

Property

Description
scaleToFillScale without aspect ratio and stretch image width to fill the image element.
aspectFit Scale with aspect ratio and show fully long side In other words, the whole image is displayed in full.
aspectFillScale 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

Property

Description
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);
  }
})