All Products
Search
Document Center

image

Last Updated: Aug 05, 2021

This topic describes image.

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 Support lazy loading of images, but does not support controlling image to display hidden scenarios through CSS. 1.9.0
onLoad EventHandle - Trigger when the image is fully loaded. where the event object is event.detail = {height:'The image height in pixels', width:'The image width in pixels'} -
onError EventHandle - Trigger when the image failed to be loaded, where the event object is event.detail = {errMsg: 'something wrong'}. -
onTap EventHandle - Trigger when the image is clicked. -
catchTap EventHandle - Trigger when the image is clicked and prevent event bubbles. -
Note: The default width and height of the image component are 300px and 225px respectively.

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.
Note: Do not set the image height to auto. To set the image height to auto, set the mode to widthFix.

Illustration

Original image

original

scaleToFill

The image is zoomed without keeping the aspect ratio, so that the image is stretched to fill all pixels.

scaleToFill

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.

aspectFill

widthFix

The height changes automatically without changing the width, and the aspect ratio of the original image remains unchanged.

widthFix

top

The image is not zoomed. Only the upper part is displayed.

top

bottom

The image is not zoomed. Only the lower part is displayed.

bottom

center

The image is not zoomed. Only the middle part is displayed.

center

left

The image is not zoomed. Only the left part is displayed.

left

right

The image is not zoomed. Only the right part is displayed.

right

top left

The image is not zoomed. Only the upper left part is displayed.

top left

top right

The image is not zoomed. Only the upper right part is displayed.

top right

bottom left

The image is not zoomed. Only the lower left part is displayed.

bottom left

bottom right

The image is not zoomed. Only the lower right part is displayed.

bottom right

Code sample

 
  1. <view class="section" a:for="{{array}}" a:for-item="item">
  2. <view class="title">{{item.text}}</view>
  3. <image style="background-color: #eeeeee; width: 300px; height:300px;" mode="{{item.mode}}" src="{{src}}" onError="imageError" onLoad="imageLoad" />
  4. </view>
 
  1. Page({
  2. data: {
  3. array: [{
  4. mode: 'scaleToFill',
  5. text: 'scaleToFill: The image is zoomed without keeping the aspect ratio, so that the image is stretched to fill all pixels.
  6. }, {
  7. mode: 'aspectFit',
  8. text: 'aspectFit: The image is zoomed with the aspect ratio unchanged, so that the longer edge of the image can be fully displayed.
  9. }, {
  10. mode: 'aspectFill',
  11. text: 'aspectFill: The image is zoomed with the aspect ratio unchanged, so that the shorter edge of the image can be fully displayed.
  12. }, {
  13. mode: 'top',
  14. text: 'top: The image is not zoomed. Only the upper part is displayed.
  15. }, {
  16. mode: 'bottom',
  17. text: 'bottom: The image is not zoomed. Only the lower part is displayed.
  18. }, {
  19. mode: 'center',
  20. text: 'center: The image is not zoomed. Only the middle part is displayed.
  21. }, {
  22. mode: 'left',
  23. text: 'left: The image is not zoomed. Only the left part is displayed.
  24. }, {
  25. mode: 'right',
  26. text: 'right: The image is not zoomed. Only the right part is displayed.
  27. }, {
  28. mode: 'top left',
  29. text: 'top left: The image is not zoomed. Only the upper left part is displayed.
  30. }, {
  31. mode: 'top right',
  32. text: 'top right: The image is not zoomed. Only the upper right part is displayed.
  33. }, {
  34. mode: 'bottom left',
  35. text: 'bottom left: The image is not zoomed. Only the lower left part is displayed.
  36. }, {
  37. mode: 'bottom right',
  38. text: 'bottom right: The image is not zoomed. Only the lower tight part is displayed.
  39. }],
  40. src: './2.png'
  41. },
  42. imageError: function (e) {
  43. console.log('Image3 has an error', e.detail.errMsg)
  44. },
  45. imageLoad: function (e) {
  46. console.log('Image is loaded successfully', e);
  47. }
  48. })