图片

属性

属性名类型默认值说明
srcString图片资源地址
modeStringscaleToFill图片裁剪、缩放的模式
onErrorHandleEvent当错误发生时，发布到 AppService 的事件名
onLoadHandleEvent当图片载入完毕时，发布到 AppService 的事件名
lazyLoadBooleanfalse图片懒加载。只针对 page 与 scroll-view 下的 image 有效

各端支持度

属性微信小程序H5ReactNative百度小程序支付宝小程序字节跳动小程序
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'
  4. export default class PageView extends Component {
  5.   constructor() {
  6.     super(...arguments)
  7.   }
  9.   render() {
  10.     return (
  11.       <View className='components-page'>
  12.         <Image
  13.           style='width: 300px;height: 100px;background: #fff;'
  14.           src='nerv_logo.png'
  15.         />
  16.         <Image
  17.           style='width: 300px;height: 100px;background: #fff;'
  18.           src='https://camo.githubusercontent.com/3e1b76e514b895760055987f164ce6c95935a3aa/687474703a2f2f73746f726167652e333630627579696d672e636f6d2f6d74642f686f6d652f6c6f676f2d3278313531333833373932363730372e706e67'
  19.         />
  20.       </View>
  21.     )
  22.   }
  23. }