Image with fallback support implemented

src/common/Image/Image.js

@@ -0,0 +1,37 @@
+const React = require('react');
+const PropTypes = require('prop-types');
+const styles = require('./styles');
+
+const Image = ({ className, src, alt, fallbackSrc, renderFallback }) => {
+    const [broken, setBroken] = React.useState(false);
+    const onError = React.useCallback((event) => {
+        if (typeof src !== 'string' || event.currentTarget.src === src) {
+            setBroken(true);
+        }
+    }, [src]);
+    React.useEffect(() => {
+        setBroken(false);
+    }, [src]);
+    return (
+        <div className={className}>
+            {
+                broken && (typeof renderFallback === 'function' || typeof fallbackSrc === 'string') ?
+                    typeof renderFallback === 'function' ?
+                        renderFallback()
+                        :
+                        <img className={styles['fallback-image']} src={fallbackSrc} alt={alt} />
+                    :
+                    <img className={styles['image']} src={src} alt={alt} onError={onError} />
+            }
+        </div>
+    );
+};
+
+Image.propTypes = {
+    className: PropTypes.string,
+    src: PropTypes.string,
+    alt: PropTypes.string,
+    renderFallback: PropTypes.func
+};
+
+module.exports = Image;

src/common/Image/index.js

@@ -0,0 +1,3 @@
+const Image = require('./Image');
+
+module.exports = Image;

src/common/Image/styles.less

@@ -0,0 +1,7 @@
+.image, .fallback-image {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    object-position: center;
+}

src/common/index.js

@@ -2,6 +2,7 @@ const Button = require('./Button');
 const Checkbox = require('./Checkbox');
 const ColorPicker = require('./ColorPicker');
 const Dropdown = require('./Dropdown');
+const Image = require('./Image');
 const MainNavBar = require('./MainNavBar');
 const MetaItem = require('./MetaItem');
 const MetaPreview = require('./MetaPreview');
@@ -27,6 +28,7 @@ module.exports = {
     Checkbox,
     ColorPicker,
     Dropdown,
+    Image,
     MainNavBar,
     MetaItem,
     MetaPreview,