图片

属性

属性名 类型 默认值 说明
src String 图片资源地址
mode String scaleToFill 图片裁剪、缩放的模式
onError HandleEvent 当错误发生时，发布到 AppService 的事件名
onLoad HandleEvent 当图片载入完毕时，发布到 AppService 的事件名
lazyLoad Boolean false 图片懒加载。只针对 page 与 scroll-view 下的 image 有效

各端支持度

属性 微信小程序 H5 ReactNative 百度小程序 支付宝小程序 字节跳动小程序
src ✔ ✔ ✔ ✔ ✔ ✔
mode ✔ ✔ 部分支持 scaleToFill, aspectFit, aspectFill, widthFix ✔ ✔ ✔
onError ✔ ✔ ✔ ✔ ✔ ✔
onLoad ✔ ✔ ✔ ✔ ✔ ✔
lazyLoad ✔ x ✔ ✔ ✔

注意

为实现小程序的 mode 特性，在 H5 组件中使用一个 div 容器来对内部的 img 进行展示区域的裁剪，因此请勿使用元素选择器来重置 img 的样式！

示例：
  1. import Taro, { Component } from '@tarojs/taro'
  2. import { View, Image } from '@tarojs/components'
  3. export default class PageView extends Component {
  4.   constructor() {
  5.     super(...arguments)
  6.   }
  7.   render() {
  8.     return (
  9.       <View className='components-page'>
  10.         <Image
  11.           style='width: 300px;height: 100px;background: #fff;'
  12.           src='nerv_logo.png'
  13.         />
  14.         <Image
  15.           style='width: 300px;height: 100px;background: #fff;'
  16.           src='https://camo.githubusercontent.com/3e1b76e514b895760055987f164ce6c95935a3aa/687474703a2f2f73746f726167652e333630627579696d672e636f6d2f6d74642f686f6d652f6c6f676f2d3278313531333833373932363730372e706e67'
  17.         />
  18.       </View>
  19.     )
  20.   }
  21. }

mode 的合法值

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