image

2022-07-29 06:08

Image.

Attribute Name	Type	Default	Description	Minimum Version
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

Attribute Name	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.
aspectFit	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

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