全部产品

image 图片

图片。

注意:

使用 webview 嵌套 H5 时,若遇到图片资源不显示问题,可参考 配置 H5 白名单流程 获取 H5 页面中所有的域名地址(含图片静态资源的地址),全部加入域名白名单中。

扫码体验

image.png

示例代码

<!-- API-DEMO page/component/image/image.axml -->
<view class="page">
  <view class="page-description">图片</view>
  <view class="page-section" a:for="{{array}}" a:for-item="item">
    <view class="page-section-title">{{item.text}}</view>
    <view class="page-section-demo" onTap="onTap">
      <image class="image"
        data-name="{{item.mode}}"
        onTap="onTap"
        mode="{{item.mode}}" src="{{src}}" onError="imageError" onLoad="imageLoad" />
    </view>
  </view>
</view>
// API-DEMO page/component/image/image.js
Page({
  data: {
    array: [{
      mode: 'scaleToFill',
      text: 'scaleToFill:不保持纵横比缩放图片,使图片完全适应',
    }, {
      mode: 'aspectFit',
      text: 'aspectFit:保持纵横比缩放图片,使图片的长边能完全显示出来',
    }, {
      mode: 'aspectFill',
      text: 'aspectFill:保持纵横比缩放图片,只保证图片的短边能完全显示出来',
    }, {
      mode: 'widthFix',
      text: 'widthFix:宽度不变,高度自动变化,保持原图宽高比不变',
    }, {
      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: '/image/ant.png',
  },
  imageError(e) {
    console.log('image 发生 error 事件,携带值为', e.detail.errMsg);
  },
  onTap(e) {
    console.log('image 发生 tap 事件', e);
  },
  imageLoad(e) {
    console.log('image 加载成功', e);
  },
});
/* API-DEMO page/component/image/image.acss */
.page-section-demo {
  display: flex;
  justify-content: space-around;
}
.image {
  background-color: red;
  width: 100px;
  height: 100px;
}

属性

属性类型默认值描述
srcString-图片地址
modeStringscaleToFill图片模式
classString外部样式-
styleString内联样式-
lazy-loadBooleanfalse支持图片懒加载,不支持通过 css 来控制 image 展示隐藏的场景。
default-sourceString-默认图片地址,若设置默认图片地址,会先显示默认图片,等 src 对应的图片加载成功后,再渲染对应的图片。
onLoadEventHandle-图片载入完毕时触发,事件对象 event.detail = {height: '图片高度px', width: '图片宽度px'}
onErrorEventHandle-当图片加载错误时触发,事件对象 event.detail = {errMsg: 'something wrong'}
onTapEventHandle-点击图片时触发
catchTapEventHandle-点击图片时触发,阻止事件冒泡

注意:image 组件默认宽度 300px、高度 225px

mode

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

缩放模式

属性描述
scaleToFill不保持纵横比缩放,使图片的宽高完全拉伸至填满 image 元素
aspectFit保持纵横比缩放,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来
aspectFill保持纵横比缩放,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取
widthFix宽度不变,高度自动变化,保持原图宽高比不变

裁剪模式

属性描述
top不缩放图片,只显示顶部区域
bottom不缩放图片,只显示底部区域
center不缩放图片,只显示中间区域
left不缩放图片,只显示左边区域
right不缩放图片,只显示右边区域
top left不缩放图片,只显示左上边区域
top right不缩放图片,只显示右上边区域
bottom left不缩放图片,只显示左下边区域
bottom right不缩放图片,只显示右下边区域

说明:图片高度不能设置为 auto,如果需要图片高度为 auto,直接设置 mode 为 widthFix。

相关文档