image

2023-04-28 21:00

Image.

Properties

Property	Type	Default	Description
src	String	-	The image URL.
mode	String	`scaleToFill`	The image mode.
class	String	-	The external style.
style	String	-	The inline style.
lazy-load	Boolean	`false`	Enables the lazy loading of an image. It is not supported in scenarios where you want to hide elements in CSS. For example, when you use the display: none attribute or the visibility: hidden attribute to hide an element in CSS, lazy loading does not work.
default-source	String	-	The default image URL. If this property is set, the default image is displayed first, and the corresponding image is rendered after the image specified by src is successfully loaded.
onLoad	EventHandle	-	Triggered when image loading is complete, which is an event object: `event.detail = {height:'image height px', width:'image width px'}`.
onError	EventHandle	-	Triggered when an error occurs in image loading, which is an event object: `event.detail = {errMsg: 'something wrong'}`.
onTap	EventHandle	-	Triggered when clicking on an image; pass click events to the parent component.
catchTap	EventHandle	-	Triggered when clicking on an image; do not pass click events to the parent component.

Note: By default, the width of the image component is 300px and the height is 225px.

Mode

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

Scaling mode

Property	Description
scaleToFill	Stretches the image to fill the available space without maintaining the aspect ratio.
aspectFit	Stretches the image to fully show the long sides while keeping its aspect ratio. In other words, the whole image is displayed in full.
aspectFill	Stretches the image to fully show the short sides while keeping its aspect ratio. In other words, the image is complete in the horizontal or vertical direction, cropping off any parts that don't fit.
widthFix	The width is not changed and the height is changed automatically while keeping its aspect ratio.

Cropping mode

Property	Description
top	Displays only the top area without scaling the image.
bottom	Displays only the bottom area without scaling the image.
center	Displays only the central area without scaling the image.
left	Displays only the left area without scaling the image.
right	Displays only the right area without scaling the image.
top left	Displays only the top left area without scaling the image.
top right	Displays only the top right area without scaling the image.
bottom left	Displays only the bottom left area without scaling the image.
bottom right	Displays only the bottom right area without scaling the image.

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

Screenshot

Original image

scaleToFill

Fit the image completely without maintaining the aspect ratio:

aspectFit

Stretches the image to fully show the long sides while keeping its aspect ratio:

aspectFill

Stretches the image to fully show the short sides while keeping its aspect ratio:

widthFix

The width is not changed and the height is changed automatically while keeping its aspect ratio:

top

Displays only the top area without scaling the image:

bottom

Displays only the bottom area without scaling the image:

center

Displays only the central area without scaling the image:

left

Displays only the left area without scaling the image:

right

Displays only the right area without scaling the image:

top left

Displays only the top left area without scaling the image:

top right

Displays only the top right area without scaling the image:

bottom left

Displays only the bottom left area without scaling the image:

bottom right

Displays only the bottom right area without scaling the 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);
  }
})