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;