• 下载
  • 社区

image 图片

图片。

使用说明

使用 webview 嵌套 H5 时,若遇到图片资源不显示问题,可参考如下解决方案:
获取 H5 页面中所有的域名地址(含图片静态资源的地址),全部加入域名白名单中。域名白名单配置路径:支付宝小程序配置后台 > 设置 > 开发设置 > H5 域名配置
undefined

扫码体验

qrcode for image

效果示例

原图

SzbNuEjBhzGWjkeOzCqo.png

scaleToFill

不保持纵横比缩放,使图片完全适应
Simulator-Screen-Shot-2017年8月18日-16.50.39_03.png

aspectFit

保持纵横比缩放,使图片的长边能完全显示出来
Simulator-Screen-Shot-2017年8月18日-16.50.39_07.png

aspectFill

保持纵横比缩放,只保证图片的短边能完全显示出来
Simulator-Screen-Shot-2017年8月18日-16.50.39_10.png

widthFix

宽度不变,高度自动变化,保持原图宽高比不变
屏幕快照 2017-08-18 17.04.30.png

top

不缩放图片,只显示顶部区域
屏幕快照 2017-08-18 17.07.01.png

bottom

不缩放图片,只显示底部区域
屏幕快照 2017-08-18 17.07.28.png

center

不缩放图片,只显示中间区域
屏幕快照 2017-08-18 17.08.10.png

left

不缩放图片,只显示左边区域
屏幕快照 2017-08-18 17.10.09.png

不缩放图片,只显示右边区域
屏幕快照 2017-08-18 17.11.46.png

top left

不缩放图片,只显示左上边区域
屏幕快照 2017-08-18 17.12.51.png

top right

不缩放图片,只显示右上边区域
屏幕快照 2017-08-18 17.13.20.png

bottom left

不缩放图片,只显示左下边区域
屏幕快照 2017-08-18 17.13.49.png

bottom right

不缩放图片,只显示右下边区域
屏幕快照 2017-08-18 17.14.35.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;
}

属性

属性 类型 默认值 描述 最低版本
src String - 图片地址 -
mode String scaleToFill 图片模式 -
class String 外部样式 - -
style String 内联样式 - -
lazy-load Boolean false 支持图片懒加载,不支持通过 css 来控制 image 展示隐藏的场景。 1.9.0
default-source String - 默认图片地址,若设置默认图片地址,会先显示默认图片,等 src 对应的图片加载成功后,再渲染对应的图片。 1.19.0
onLoad EventHandle - 图片载入完毕时触发,事件对象 event.detail = {height: '图片高度px', width: '图片宽度px'} -
onError EventHandle - 当图片加载错误时触发,事件对象 event.detail = {errMsg: 'something wrong'} -
onTap EventHandle - 点击图片时触发 -
catchTap EventHandle - 点击图片时触发,阻止事件冒泡 -

注意: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。