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 | - |
onError | EventHandle | - | Triggered when the image failed to be loaded, where the event object is | - |
onTap | EventHandle | - | Triggered when the image is clicked. | - |
catchTap | EventHandle | - | Triggered when the image is clicked and prevent event bubbles. | - |
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. |
Do not set the image height to auto. To set the image height to auto, set the mode to widthFix
.
Illustration
Original image
scaleToFill
The image is zoomed without keeping the aspect ratio, so that the image is stretched to fill all pixels.
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.
widthFix
The height changes automatically without changing the width, and the aspect ratio of the original image remains unchanged.
top
The image is not zoomed. Only the upper part is displayed.
bottom
The image is not zoomed. Only the lower part is displayed.
center
The image is not zoomed. Only the middle part is displayed.
left
The image is not zoomed. Only the left part is displayed.
right
The image is not zoomed. Only the right part is displayed.
top left
The image is not zoomed. Only the upper left part is displayed.
top right
The image is not zoomed. Only the upper right part is displayed.
bottom left
The image is not zoomed. Only the lower left part is displayed.
bottom right
The image is not zoomed. Only the lower right part is displayed.
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);
}
})