Image

图片

属性

属性名	类型	默认值	说明
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 的样式！

示例：

import Taro, { Component } from '@tarojs/taro'
import { View, Image } from '@tarojs/components'

export default class PageView extends Component {
  constructor() {
    super(...arguments)
  }

  render() {
    return (
      <View className='components-page'>
        <Image
          style='width: 300px;height: 100px;background: #fff;'
          src='nerv_logo.png'
        />
        <Image
          style='width: 300px;height: 100px;background: #fff;'
          src='https://camo.githubusercontent.com/3e1b76e514b895760055987f164ce6c95935a3aa/687474703a2f2f73746f726167652e333630627579696d672e636f6d2f6d74642f686f6d652f6c6f676f2d3278313531333833373932363730372e706e67'
        />
      </View>
    )
  }
}