Image

图片

属性

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

各端支持度

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

注意

为实现小程序的 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. }