image 图片

解释：图片，image 组件默认宽度 300px、高度 225px。

属性说明

属性名类型默认值必填说明
srcString否图片资源地址
modeStringscaleToFill否图片裁剪、缩放的模式
lazy-loadBooleanfalse否图片懒加载，在图片即将进入一定范围（距离当前屏50px）时才开始进行加载。
binderrorHandleEvent否当错误发生时，发布到 AppService 的事件名，事件对象 event.detail = {errMsg: 'something wrong'}
bindloadHandleEvent否当图片载入完毕时，发布到 AppService 的事件名，事件对象 event.detail = {height:'图片高度px', width:'图片宽度px'}

mode 有效值

有 13 种模式，其中 4 种是缩放模式，9 种是裁剪模式。

模式值说明
缩放scaleToFill不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
缩放aspectFit保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
缩放aspectFill保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
缩放widthFix宽度不变，高度自动变化，保持原图宽高比不变
裁剪top不缩放图片，只显示图片的顶部区域
裁剪bottom不缩放图片，只显示图片的底部区域
裁剪center不缩放图片，只显示图片的中间区域
裁剪left不缩放图片，只显示图片的左边区域
裁剪right不缩放图片，只显示图片的右边区域
裁剪top left不缩放图片，只显示图片的左上区域
裁剪top right不缩放图片，只显示图片的右上区域
裁剪bottom left不缩放图片，只显示图片的左下区域
裁剪bottom right不缩放图片，只显示图片的右下区域

示例

在开发者工具中预览效果

扫码体验

image 图片 - 图1请使用百度APP扫码

代码示例 1： 缩放模式

在开发者工具中预览效果

  1. <view class="wrap">
  2.     <view class="card-area">
  3.         <view class="top-description border-bottom">
  4.             <view>缩放模式</view>
  5.             <view data-type="scaleToFill" bindtap="onTap">点击恢复原图</view>
  6.         </view>
  7.         <view class="page-section-demo">
  8.         <image class="image" mode="{{type}}" src='https://b.bdstatic.com/miniapp/image.png' binderror="imageError" bindload="imageLoad" />
  9.         </view> 
  10.      </view>
  11.         <scroll-view scroll-y='true'>
  12.             <view class="card-area" s-for="item in array">
  13.                 <view class="top-description border-bottom">{{item.text}}</view>
  14.                 <button type="primary" class="page-section-title" data-type="{{item.mode}}" bindtap="onTap">{{item.mode}}</button>
  15.             </view>
  16.         </scroll-view>
  17. </view>
  1. Page({
  2.     data: {
  3.       array: [{
  4.             mode: 'scaleToFill',
  5.             text: 'scaleToFill：不保持纵横比缩放图片，使图片完全适应',
  6.         }, {
  7.             mode: 'aspectFit',
  8.             text: 'aspectFit：保持纵横比缩放图片，使图片的长边能完全显示出来',
  9.         }, {
  10.             mode: 'aspectFill',
  11.             text: 'aspectFill：保持纵横比缩放图片，只保证图片的短边能完全显示出来',
  12.         }, {
  13.             mode: 'widthFix',
  14.             text: 'widthFix：宽度不变，高度自动变化，保持原图宽高比不变',
  15.         }],
  16.       type: ''
  17.     },
  18.     imageError(e) {
  19.       console.log('image 发生 error 事件，携带值为', e.detail.errMsg);
  20.     },
  21.     onTap(e) {
  22.         console.log('image 发生 error 事件，携带值为', e.currentTarget.dataset.type);
  23.         this.setData({'type': e.currentTarget.dataset.type})
  24.     },
  25.     imageLoad(e) {
  26.       console.log('image 加载成功', e);
  27.     },
  28. });

代码示例 2： 裁剪模式

在开发者工具中预览效果

  1. <view class="wrap">
  2.     <view class="card-area">
  3.         <view class="top-description border-bottom">
  4.             <view>裁剪模式</view>
  5.             <view data-type="scaleToFill" bindtap="onTap">点击恢复原图</view>
  6.         </view>
  7.         <view class="page-section-demo">
  8.         <image class="image" mode="{{type}}" src='https://b.bdstatic.com/miniapp/image.png' binderror="imageError" bindload="imageLoad" />
  9.         </view> 
  10.      </view>
  11.         <scroll-view scroll-y='true'>
  12.             <view class="card-area" s-for="item in array">
  13.                 <view class="top-description border-bottom">{{item.text}}</view>
  14.                 <button type="primary" class="page-section-title" data-type="{{item.mode}}" bindtap="onTap">{{item.mode}}</button>
  15.             </view>
  16.         </scroll-view>
  17. </view>
  1. Page({
  2.     data: {
  3.       array: [{
  4.             mode: 'top',
  5.             text: 'top：不缩放图片，只显示图片的顶部区域'
  6.         }, {
  7.             mode: 'bottom',
  8.             text: 'bottom：不缩放图片，只显示图片的底部区域'
  9.         }, {
  10.             mode: 'center',
  11.             text: 'center：不缩放图片，只显示图片的中间区域'
  12.         }, {
  13.             mode: 'left',
  14.             text: 'left：不缩放图片，只显示图片的左边区域'
  15.         }, {
  16.             mode: 'right',
  17.             text: 'right：不缩放图片，只显示图片的右边边区域'
  18.         }, {
  19.             mode: 'top left',
  20.             text: 'top left：不缩放图片，只显示图片的左上边区域'
  21.         }, {
  22.             mode: 'top right',
  23.             text: 'top right：不缩放图片，只显示图片的右上边区域'
  24.         }, {
  25.             mode: 'bottom left',
  26.             text: 'bottom left：不缩放图片，只显示图片的左下边区域'
  27.         }, {
  28.             mode: 'bottom right',
  29.             text: 'bottom right：不缩放图片，只显示图片的右下边区域'
  30.         }],
  31.       type: ''
  32.     },
  33.     imageError(e) {
  34.       console.log('image 发生 error 事件，携带值为', e.detail.errMsg);
  35.     },
  36.     onTap(e) {
  37.         console.log('image 发生 error 事件，携带值为', e.currentTarget.dataset.type);
  38.         this.setData({'type': e.currentTarget.dataset.type})
  39.     },
  40.     imageLoad(e) {
  41.       console.log('image 加载成功', e);
  42.     },
  43.   });

代码示例3 - 可放动图

在开发者工具中预览效果

  1. <image src='https://b.bdstatic.com/miniapp/images/radio.gif'/>

Bug & Tip

  • Tip：支持设置 CSS background-position 属性，但是不推荐使用，会影响对应 mode 类型的展示。
  • Tip：image 组件默认宽度 300px、高度 225px。