image

Image.

Example

js

Page({
   data: {
       imageUrl: 'https://bin.bnbstatic.com/image/julia/new-hompage/foreground-image-light.png',
       lazyImageUrl: 'https://bin.bnbstatic.com/image/julia/new-hompage/foreground-image-light.png',
       localImage: 'pages/tabbar/component/resources/pic/1.jpg',
   array: [{
       mode: 'scaleToFill',
      text: 'scaleToFill'
     }, {
      mode: 'aspectFit',
      text: 'aspectFit'
    }, {
      mode: 'aspectFill',
      text: 'aspectFill'
    }, {
      mode: 'widthFix',
      text: 'widthFix'
    }, {
      mode: 'heightFix',
      text: 'heightFix'
    }, {
      mode: 'top',
      text: 'top'
    }, {
      mode: 'bottom',
      text: 'bottom'
    }, {
      mode: 'center',
      text: 'center'
    }, {
      mode: 'left',
      text: 'left'
    }, {
      mode: 'right',
      text: 'right'
    }, {
       mode: 'top left',
       text: 'top left'
    }, {
       mode: 'top right',
       text: 'top right'
    }, {
      mode: 'bottom left',
      text: 'bottom left'
    }, {
      mode: 'bottom right',
      text: 'bottom right'
    }],
},
onClick(e) {
    console.log(`[Image] onClick`, e)
},
  onLongPress(e) {
    console.log(`[Image] onLongPress`, e)
  },
  onLoad(e) {
    console.log(`[Image] onLoad`, e)
  },
  onError(e) {
    console.log(`[Image] onError`, e)
  },
})

bxml

<view class="page">
  <view class="page__hd">
    <text class="page__title">image</text>
    <text class="page__desc">picture</text>
  </view>
  <view class="page__bd">
    <view class="section section_gap" bn:for-items="{{array}}" bn: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>

bxss

.section__ctn{
    text-align: center;
}

Bug & Tip

• tip: Image component default width 320px, height 240px
• tip: QR code in image component/Mini Program code image does not support long press recognition. Long press recognition is supported only in wx.preview Image