image
Image.
Attribute Name | type | Default | Description | Minimum Version |
src | String | image address (Support image type: png, jpeg) | ||
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
<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: 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);
}
})