diff --git a/README.md b/README.md index f619922..a0f6c54 100644 --- a/README.md +++ b/README.md @@ -99,7 +99,7 @@ class Demo extends React.Component { | onError | (err: Event) => void | null | This function will be called when image is failed | | loading | () => React.Element<*> | null | Return a React element that will show when image is loading | | error | () => React.Element<*> | null | Return a React element that will show when image is crashed | -| image | ({src: string}) => React.Element<*> | null | Final result will render to this customized React element, if you don't assign this props default image will render into `` | +| image | ({src: string, width: number, height: number}) => React.Element<*> | null | Final result will render to this customized React element, if you don't assign this props default image will render into `` | ## Start example server diff --git a/src/index.js b/src/index.js index ea06d79..c83212a 100644 --- a/src/index.js +++ b/src/index.js @@ -14,6 +14,8 @@ type State = { isLoading: boolean, isError: boolean, src: ?string, + width: ?number, + height: ?number, errMsg: ?any, } @@ -26,6 +28,8 @@ export default class ImageLoader extends React.Component { isLoading: true, isError: false, src: null, + width: null, + height: null, errMsg: null } } @@ -48,10 +52,13 @@ export default class ImageLoader extends React.Component { }); const image = new Image(); + image.src = props.src; image.onload = () => { this.setState({ src: image.src, + width: image.width, + height: image.height, isLoading: false, isError: false, errMsg: null @@ -63,6 +70,8 @@ export default class ImageLoader extends React.Component { image.onerror = (err) => { this.setState({ src: null, + width: null, + height: null, isLoading: false, isError: true, errMsg: err @@ -75,16 +84,16 @@ export default class ImageLoader extends React.Component { render() { const {loading, error, image} = this.props; - const {src, isLoading, isError, errMsg} = this.state; + const {src, width, height, isLoading, isError, errMsg} = this.state; if (loading && isLoading) { return loading(); } else if (error && isError && errMsg) { return error(errMsg); } else if (src && image) { - return image({src}); + return image({src, width, height}); } else if (src) { - return + return } return null;