diff --git a/package.json b/package.json index 8780d2b..8e75ae1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@binance-academy/fallback-image", - "version": "1.0.2", + "version": "1.0.3", "description": "Display a fallback while an image is loading", "main": "build/index.js", "scripts": { diff --git a/src/index.js b/src/index.js index 93f3fee..bd0bce7 100644 --- a/src/index.js +++ b/src/index.js @@ -19,7 +19,7 @@ const imgStyle = { transition: "opacity 1s linear", }; -class Image extends React.Component { +class ImageWithFallBack extends React.Component { constructor(props) { super(props); this.state = { @@ -27,29 +27,31 @@ class Image extends React.Component { }; } + componentDidMount() { + const { src } = this.props; + const image = new Image(); + image.onload = () => { + this.setState({ + isLoaded: true, + }); + }; + image.src = src; + } + render() { const { src, alt, invertedRatio = 56.25, maxWidth, ...otherProps } = this.props; const { isLoaded } = this.state; return (