image

Image.

Attribute name Category Default Value Description Minimum Version
src String Image resource address
mode String 'scaleToFill' Image cropping/zoom mode
lazy-load Boolean false Image lazy load. Only effective for images on page and scroll-view 1.5.0
binderror HandleEvent The event name posted on AppService when an error occurs. Event object: event.detail = {errMsg: 'something wrong'}
bindload HandleEvent The event name posted on AppService when an image is loaded. Event object: event.detail = {height:'image height px', width:'image width px'}

Note 1: The default width of 'image' component is 300 px, and default height 225 px Note 2: The image module does not support long-press recognition for QR code/Mini Program codes. This function is only available on wx.previewImage.

Valid values for 'mode':

'mode' has 13 modes, 4 of which are zoom modes and 9 of which are cropping modes.

Mode Value Description
Zoom scaleToFill It does not keep the aspect ratio for image zooming, which causes the width and height of images to stretch to fill the 'image' element
Zoom aspectFit It keeps the aspect ratio for scaled images, allowing the edges of the image to be fully displayed. This means that a complete image can be displayed.
Scale aspectFill Scale an image while preserving the aspect ratio, ensuring that only short sides of the image are fully displayed. This means that if an image is only complete when shown horizontally or vertically, part of that image will be cut off.
Scale widthFix Maintains a constant width, and the height automatically changes, keeping the image's original aspect ratio
Cropping top It does not scale the image and displays only the top part of the image
Cropping bottom It does not scale the image and displays only the bottom part of the image
Cropping center It does not scale the image and displays only the middle part of the image
Cropping left It does not scale the image and displays only the left part of the image
Cropping right It does not scale the image and displays only the right part of the image
Cropping top left It does not scale the image and displays only the upper left part of the image
Cropping top right It does not scale the image and displays only the upper right part of the image
Cropping bottom left It does not scale the image and displays only the lower left part of the image
Cropping bottom right It does not scale the image and displays only the lower right part of the image

Sample:

Preview with Developer Tool

<view class="page">
  <view class="page__hd">
    <text class="page__title">image</text>
    <text class="page__desc">Image</text>
  </view>
  <view class="page__bd">
    <view class="section section_gap" wx:for="{{array}}" wx:for-item="item">
      <view class="section__title">{{item.text}}</view>
      <view class="section__ctn">
        <image style="width: 200px; height: 200px; background-color: #eeeeee;" mode="{{item.mode}}" src="{{src}}"></image>
      </view>
    </view>
  </view>
</view>
Page({
  data: {
    array: [{
      mode: 'scaleToFill',
      text: 'scaleToFill: Scale the image to the frame without preserving the aspect ratio'
    }, { 
      mode: 'aspectFit',
      text: 'aspectFit: Scale an image while preserving the aspect ratio, and long sides of the image should be fully displayed.'
    }, { 
      mode: 'aspectFill',
      text: 'aspectFill: Scale an image while preserving the aspect ratio, ensuring that only short sides of the image are fully displayed'
    }, { 
      mode: 'top',
      text: 'top: Does not scale the image. Only the top of the image is displayed' 
    }, {      
      mode: 'bottom',
      text: 'bottom: Does not scale the image. Only the bottom of the image is displayed'
    }, { 
      mode: 'center',
      text: 'center: It does not scale the image and displays only the middle part of the image'
    }, { 
      mode: 'left',
      text: 'left: It does not scale the image and displays only the left part of the image'
    }, { 
      mode: 'right',
      text: 'right: It does not scale the image and displays only the right part of the image'
    }, { 
      mode: 'top left',
      text: 'top left: It does not scale the image and displays only the upper left part of the image' 
    }, { 
      mode: 'top right',
      text: 'top right: It does not scale the image and displays only the upper right part of the image'
    }, { 
      mode: 'bottom left',
      text: 'bottom left: It does not scale the image and displays the lower left part of the image'
    }, { 
      mode: 'bottom right',
      text: 'bottom right: It does not scale the image and displays only the lower right part of the image'
    }],
    src: '../../resources/cat.jpg'
  },
  imageError: function(e) {
    console.log('image3 has encountered an error event. The carried value is ', e.detail.errMsg)
  }
})
Original image

image

scaleToFill

Scale the image to the frame without preserving the aspect ratio

image

aspectFit

Scale an image while preserving the aspect ratio, and long sides of the image should be fully displayed

image

aspectFill

Scale an image while preserving the aspect ratio, ensuring that only short sides of the image are fully displayed

image

top

It does not scale the image and displays only the top part of the image

image

bottom

It does not scale the image and displays only the bottom part of the image

image

center

It does not scale the image and displays only the middle part of the image

image

left

It does not scale the image and displays only the left part of the image

image

It does not scale the image and displays only the right part of the image

image

top left

It does not scale the image and displays only the upper left part of the image

image

top right

It does not scale the image and displays only the upper right part of the image

image

bottom left

It does not scale the image and displays only the lower left part of the image

image

bottom right

It does not scale the image and displays only the lower right part of the image

image

个结果 ""

    没有找到相关内容 ""