From b688f735e673fbaa8701034243037d97124ad8a5 Mon Sep 17 00:00:00 2001
From: Brykou <11095630+Brykou@users.noreply.github.com>
Date: Wed, 9 Oct 2019 19:58:16 +0800
Subject: [PATCH] Fix loading

Move onLoad inside CDM to avoid a bug in which the image was loaded but the load event was never triggered.
---
 package.json |  2 +-
 src/index.js | 30 ++++++++++++++++--------------
 2 files changed, 17 insertions(+), 15 deletions(-)

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 (
       <div style={{ ...containterStyle, maxWidth: maxWidth || "auto" }} {...otherProps}>
         <div style={{ ...placeholderStyle, paddingBottom: `${invertedRatio}%` }} />
-        <img
-          src={src}
-          alt={alt}
-          style={{ ...imgStyle, opacity: isLoaded ? 1 : 0 }}
-          onLoad={() => {
-            this.setState({
-              isLoaded: true,
-            });
-          }}
-        />
+        <img src={isLoaded ? src : null} alt={alt} style={{ ...imgStyle, opacity: isLoaded ? 1 : 0 }} />
         <noscript>{<img src={src} alt={alt} style={imgStyle} />}</noscript>
       </div>
     );
   }
 }
 
-Image.propTypes = {
+ImageWithFallBack.propTypes = {
   /* Url of the image */
   src: PropTypes.string.isRequired,
 
@@ -57,10 +59,10 @@ Image.propTypes = {
   alt: PropTypes.string.isRequired,
 
   /* Inverted ratio as a % (for a 16/9 ratio it's 9/16*100=56.25 for example) */
-  invertedRatio: PropTypes.string.isRequired,
+  invertedRatio: PropTypes.number.isRequired,
 
   /* Provide an optional max width for the image */
   maxWidth: PropTypes.string,
 };
 
-export default Image;
+export default ImageWithFallBack;