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 240pxtip
: 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