图片组件

  • 和普通图片使用方式一致,src为必填选项,可自行添加alt属性。
  • 可通过defaultSrc添加默认图片地址,在图片未加载出来之前显示。
  • 可通过phSize设置图片大小,default为宽高和父级一致;cover为覆盖,不变形,没有空白区域;contain包含,不变形,可能有空白区域。
  • 可通过lazy设置图片为懒加载的模式,当图片进入视口之后才开始加载,可配合ImageList使用。
  • 可通过loadCallback设置图片加载完成的回调函数。
  • cover和contain必须设置定高。

主要属性和接口:

  • src: 图片地址。
    如:<Image src={IMAGE_URL} alt='图片没有加载上的提示语'/>
  • defaultSrc: 默认图片地址。
    如:<Image src={IMAGE_URL} defaultSrc={DEFAULT_URL}/>
  • phSize: 图片大小。
    如:<Image src={IMAGE_URL} phSize='cover'/>
  • lazy: 是否懒加载
    如:<Image src={IMAGE_URL} lazy/>
  • loadCallback: 图片加载完成的回调
    如:<Image src={IMAGE_URL} loadCallback={(err)=>{if(!err) console.log('success!')}}/>
Extends Component
Defined in: src/image/index.js:11
Module: 基础组件

Available since 2.0.0

Constructor

Image

Image ()

Defined in src/image/index.js:11

Available since 2.0.0

Example:

import React, { Component } from "react"

import Image from "phoenix-ui/lib/image"
import Code from "./code/code"

const DEFULT_IMAGE = 'http://p0.meituan.net/future/e810685f6c386c507bcb12e337f2a6982017.png', // star
      IMAGE_URL = 'http://p0.meituan.net/future/fe2b68c5aec9e3142c0acee1611afaf957492.png', // yes no
      LAZY_URL = 'http://p0.meituan.net/future/dec9588cf2fe6687ebb593762c2fc5878936.png' // cat

export default class image extends Component{
    constructor(props,context){
        super(props,context); 
    }

    loadCallback(err){
        if(!err){
            console.log('success!')
        }else{
            console.error(err)
        }
    }

    render(){
        return(
            <div>
                <h2 className="comp-title">Image</h2>
                <h3 className="comp-type">src(必须) 图片地址</h3>
                <div className="content">
                    <Image src={IMAGE_URL} alt="..."/>
                </div>
                <Code target="image-src" />

                <h3 className="comp-type">defaultSrc 默认图片地址</h3>
                <div className="content">
                    <Image defaultSrc={DEFULT_IMAGE} src={IMAGE_URL} />
                </div>
                <Code target="image-defaultsrc" />

                <h3 className="comp-type">lazy 是否懒加载(当图片到达视口区域才加载)</h3>
                <div className="content">
                    <Image defaultSrc={DEFULT_IMAGE} src={LAZY_URL} lazy />
                </div>
                <Code target="image-lazy" />

                <h3 className="comp-type">phSize(默认default) 图片大小(default/cover/contain)</h3>
                <div className="content">
                    <h3 className="comp-tip">default(宽高100%)</h3>
                    <Image src={IMAGE_URL} phSize="default" />
                    <h3 className="comp-tip">cover(短边100%,不变形)</h3>
                    <Image src={IMAGE_URL} phSize="cover" />
                    <h3 className="comp-tip">contain(长边100%,不变形,留有空白区)</h3>
                    <Image src={IMAGE_URL} phSize="contain" />
                </div>
                <Code target="image-phsize" />

                <h3 className="comp-type">loadCallback 图片加载完成的回调</h3>
                <div className="content">
                    <Image src={IMAGE_URL} loadCallback={this.loadCallback.bind(this)} />
                </div>
                <Code target="image-loadcallback" />
            </div>
        );
    }
}

属性

classPrefix

String

样式前缀

Default:

'image'

defaultSrc

String

默认图片地址

Default:

null

lazy

Boolean

是否懒加载

Default:

false

loadCallback

Function

图片加载完成的回调

Default:

null

phSize

String

图片大小,[default, cover, contain]

Default:

'default'

src

String

图片地址

Default:

null