All Products
Search
Document Center

Mobile Platform as a Service:image

Last Updated:Aug 17, 2022

This topic describes the image component.

Attribute

Type

Default value

Description

Minimum version

src

String

-

The image address

-

mode

String

scaleToFill

The image mode.

-

class

String

The external style.

-

-

style

String

The inline style

-

-

lazy-load

Boolean

false

Whether to enable lazy load. The lazy load is applicable to the scenarios that you fail to control image presentation or hide through CSS.

1.9.0

onLoad

EventHandle

-

Triggered when the image is fully loaded, where the event object is event.detail = {height:'The image height in pixels', width:'The image width in pixels'}

-

onError

EventHandle

-

Triggered when the image failed to be loaded, where the event object is event.detail = {errMsg: 'something wrong'}.

-

onTap

EventHandle

-

Triggered when the image is clicked.

-

catchTap

EventHandle

-

Triggered when the image is clicked and prevent event bubbles.

-

Note: The default width and height of the image component are 300px and 225px respectively.

Mode

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

Scaling modes

Attribute

Description

scaleToFill

Do not keep aspect-ratio scaling, but stretch the width and height of the image to fill up the image element.

aspectFit

Keep aspect-ratio scaling and fully display the long side of the image. In other words, fully display the image.

aspectFill

Keep aspect-ratio scaling and only ensure that the short side of the image can be fully displayed. In other words, the image is complete horizontally or vertically and is truncated in the other direction.

widthFix

Keep the width unchanged, change the height automatically, and keep the original aspect ratio of the image.

Cropping modes

Attribute

Description

top

Do not zoom the image and display only the top area.

bottom

Do not zoom the image and display only the bottom area.

center

Do not zoom the image and display only the central area.

left

Do not zoom the image and display only the left area.

right

Do not zoom the image and display only the right area.

top left

Do not zoom the image and display only the upper-left area.

top right

Do not zoom the image and display only the upper-right area.

bottom left

Do not zoom the image and display only the lower-left area.

bottom right

Do not zoom the image and display only the lower-right area.

Note

Do not set the image height to auto. To set the image height to auto, set the mode to widthFix.

Illustration

Original image

original

scaleToFill

The image is zoomed without keeping the aspect ratio, so that the image is stretched to fill all pixels.

scaleToFill

aspectFit

Keep aspect-ratio scaling and fully display the long side of the image.

aspectFill

Keep aspect-ratio scaling and only ensure that the short side of the image can be fully displayed.

aspectFill

widthFix

The height changes automatically without changing the width, and the aspect ratio of the original image remains unchanged.

widthFix

top

The image is not zoomed. Only the upper part is displayed.

top

bottom

The image is not zoomed. Only the lower part is displayed.

bottom

center

The image is not zoomed. Only the middle part is displayed.

center

left

The image is not zoomed. Only the left part is displayed.

left

right

The image is not zoomed. Only the right part is displayed.

right

top left

The image is not zoomed. Only the upper left part is displayed.

top left

top right

The image is not zoomed. Only the upper right part is displayed.

top right

bottom left

The image is not zoomed. Only the lower left part is displayed.

bottom left

bottom right

The image is not zoomed. Only the lower right part is displayed.

bottom right

Code sample

<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>
Page({
  data: {
    array: [{
      mode: 'scaleToFill',
      text: 'scaleToFill: The image is zoomed without keeping the aspect ratio, so that the image is stretched to fill all pixels.
    }, {
      mode: 'aspectFit',
      text: 'aspectFit: The image is zoomed with the aspect ratio unchanged, so that the longer edge of the image can be fully displayed.
    }, {
      mode: 'aspectFill',
      text: 'aspectFill: The image is zoomed with the aspect ratio unchanged, so that the shorter edge of the image can be fully displayed.
    }, {
      mode: 'top',
      text: 'top: The image is not zoomed. Only the upper part is displayed.
    }, {
      mode: 'bottom',
      text: 'bottom: The image is not zoomed. Only the lower part is displayed.
    }, {
      mode: 'center',
      text: 'center: The image is not zoomed. Only the middle part is displayed.
    }, {
      mode: 'left',
      text: 'left: The image is not zoomed. Only the left part is displayed.
    }, {
      mode: 'right',
      text: 'right: The image is not zoomed. Only the right part is displayed.
    }, {
      mode: 'top left',
      text: 'top left: The image is not zoomed. Only the upper left part is displayed.
    }, {
      mode: 'top right',
      text: 'top right: The image is not zoomed. Only the upper right part is displayed.
    }, {
      mode: 'bottom left',
      text: 'bottom left: The image is not zoomed. Only the lower left part is displayed.
    }, {
      mode: 'bottom right',
      text: 'bottom right: The image is not zoomed. Only the lower tight part is displayed.
    }],
    src: './2.png'
  },
  imageError: function (e) {
    console.log('Image3 has an error', e.detail.errMsg)
  },
  imageLoad: function (e) {
    console.log('Image is loaded successfully', e);
  }
})