小程序开发之组件image（图片）

image

图片。
小程序开发之组件image（图片）

注：

image组件默认宽度300px、高度225px
image组件中二维码/小程序码图片不支持长按识别。仅在wx.previewImage中支持长按识别。

mode 有效值：

mode 有 13 种模式，其中 4 种是缩放模式，9 种是裁剪模式。
小程序开发之组件image（图片）

例如：
效果展示

代码
index.wxml

<!-- 
  src   图片资源地址，支持云文件ID
  mode  'scaleToFill'   mode 有 13 种模式，其中 4 种是缩放模式，9 种是裁剪模式。
    缩放  scaleToFill 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
    缩放  aspectFit   保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
    缩放  aspectFill  保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。   
  lazy-load:false   图片懒加载。只针对page与scroll-view下的image有效
  binderror   当错误发生时，发布到 AppService 的事件名，事件对象event.detail = {errMsg: 'something wrong'}   
  bindload  当图片载入完毕时，发布到 AppService 的事件名，事件对象event.detail = {height:'图片高度px', width:'图片宽度px'}   
  aria-label无障碍访问，（属性）元素的额外描述
 -->
<!-- 通常图片mode:aspectFit-->
<image style='width:100%' src='../resources/cat.jpg' mode="aspectFit"></image>

<view class='image_title'>mode有13种模式:</view>
<view class='image_title'>4种是缩放模式，9种是裁剪模式</view>

<view class="imageView" wx:for-items="{{array}}" wx:for-item="item">
  <view class="image_title1">{{item.text}}</view>
  <image style="width: 200px; height: 200px; background-color: #eeeeee;" mode="{{item.mode}}" src="../resources/cat.jpg" binderror="imageError"></image>
</view>

index.wxss

.image_title{
  margin-left: 20rpx;
}
.image_title1{
  margin-left: 20rpx;
  margin-top: 20rpx;
  color: red;
  font-size: 30rpx;
}
.imageView{
  margin-left: 50rpx;
}

index.js

Page({
  data: {
    array: [{
      mode: 'scaleToFill',
      text: 'scaleToFill：不保持纵横比缩放图片，使图片完全适应'
    }, {
      mode: 'aspectFit',
      text: 'aspectFit：保持纵横比缩放图片，使图片的长边能完全显示出来'
    }, {
      mode: 'aspectFill',
      text: 'aspectFill：保持纵横比缩放图片，只保证图片的短边能完全显示出来'
    }, {
      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：不缩放图片，只显示图片的右下边区域'
    }],
    src: '../resources/cat.jpg'
  },
  imageError: function (e) {
    console.log('image3发生error事件，携带值为', e.detail.errMsg)
  }
})

小程序开发之组件image（图片）

image

mode 有效值：

相关推荐