Image
图片组件
- 和普通图片使用方式一致,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!')}}/>
Constructor
Image
Image
()
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