image

2021-07-21 11:23

Image
Scan QR code to try:

Property	Type	Default	Description
src	String		Image address.
mode	String	scaleToFill	Image mode.
class	String	external style
style	String	Inline style
onLoad	EventHandle		Trigger upon image loading completion, event object event.detail = {height:'image height px', width:'image width px'}.
onError	EventHandle		Trigger on image loading error, event object event.detail = {errMsg: 'something wrong'}.
onTap	EventHandle		Triggered when clicking on an image, and pass click events to the parent component.
catchTap	EventHandle		Triggered 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
scaleToFill	Scale 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.
aspectFill	Scale 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.
widthFix	Width not changed and height changed automatically with aspect ratio unchanged.

Cropping Mode

Property	Description
top	Not scaling image, showing only top area.
bottom	Not scaling image, showing only bottom area.
center	Not scaling image, showing only central area.
left	Not scaling image, showing only left area.
right	Not scaling image, showing only right area.
top left	Not scaling image, showing only top left area.
top right	Not scaling image, showing only top right area.
bottom left	Not scaling image, showing only bottom left area.
bottom right	Not 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

scaleToFill

Fit image completely without maintaining aspect ratio

aspectFit

Scale with aspect ratio and show fully long side

aspectFill

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

widthFix

Width not changed and height changed automatically with aspect ratio unchanged

top

Not scaling image and showing only top area

bottom

Not scaling image and showing only bottom area

center

Not scaling image and showing only central area

left

Not scaling image and showing only left area

right

Not scaling image and showing only right area

top left

Not scaling image and showing only top left area

top right

Not scaling image and showing only right top area

bottom left

Not scaling image and showing only bottom left area

bottom right

Not scaling image and showing only bottom right area

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