Expose a prop allowing users to specify a custom fallback image

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-gallery-carousel",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Mobile-friendly Carousel with batteries included (supporting touch, mouse emulation, lazy loading, thumbnails, fullscreen, RTL, keyboard navigation and customisations).",
   "author": "yifaneye",
   "license": "MIT",

src/components/Carousel/Carousel.js

@@ -564,6 +564,7 @@ const GalleryCarousel = (props, ref) => {
               widgetsHasShadow={props.widgetsHasShadow}
               hasCaptions={settings.hasCaptions}
               curIndex={slides.curIndex}
+              placeholderImg={props.placeholderImg}
             />
           </div>
           {widgets}

src/components/Carousel/props.js

@@ -48,6 +48,7 @@ export const propTypes = {
   hasDotButtonsAtMax: largeWidgetPositions,
   hasCaptionsAtMax: largeWidgetPositions,
   hasThumbnailsAtMax: PropTypes.bool,
+  placeholderImg: PropTypes.string,
   leftIcon: PropTypes.node,
   rightIcon: PropTypes.node,
   playIcon: PropTypes.node,

src/components/Image/Image.js

@@ -1,9 +1,9 @@
-import React, { Fragment, useRef, useState } from 'react';
+import React, { Fragment, useEffect, useRef, useState } from 'react';
 import styles from './Image.module.css';
 import { PLACEHOLDER_IMAGE } from './constants';
 import { Caption } from '../Widgets';
 import useIntersectionObserver from '../../utils/useIntersectionObserver';
-import PropTypes from 'prop-types';
+import PropTypes, { string } from 'prop-types';
 import {
   objectFitStyles,
   largeWidgetPositions,
@@ -33,15 +33,27 @@ const LazyLoadedImage = (props) => {
     // the low quality image (props.image.thumbnail) will be hidden
   };
 
+  // This block checks whether the user specified fallback image actually works or not
+  const [isLoading, setIsLoading] = useState(true);
+  const [isValidFallback, setIsValidFallback] = useState(false);
+  useEffect(() => {
+    fetch(props.placeholderImg).then(res => {
+      setIsValidFallback(res.status === 200);
+      setIsLoading(false);
+    }).catch((_reason) => {
+      setIsLoading(false);
+    })
+  }, []);
+
   const handleError = () => {
     setHasError(true);
   };
 
   let { src, srcset, alt, thumbnail, ...otherImageProps } = props.image;
 
-  src = isInViewport && !hasError ? src : PLACEHOLDER_IMAGE;
+  src = isInViewport && !hasError ? src : (!isLoading && isValidFallback ? props.placeholderImg : PLACEHOLDER_IMAGE);
   srcset = isInViewport && !hasError ? srcset : null;
-  thumbnail = isInViewport && !hasError ? thumbnail : PLACEHOLDER_IMAGE;
+  thumbnail = isInViewport && !hasError ? thumbnail : (!isLoading && isValidFallback ? props.placeholderImg : PLACEHOLDER_IMAGE);
 
   return (
     <>
@@ -81,11 +93,28 @@ export const Image = (props) => {
 
   const { src, alt, srcset, thumbnail, ...otherImageProps } = props.image;
 
+  // This block checks whether the user specified fallback image actually works or not
+  const [isLoading, setIsLoading] = useState(true);
+  const [isValidFallback, setIsValidFallback] = useState(false);
+  useEffect(() => {
+    fetch(props.placeholderImg).then(res => {
+      setIsValidFallback(res.status === 200);
+      setIsLoading(false);
+    }).catch((_reason) => {
+      setIsLoading(false);
+    })
+  }, []);
+
+  const handleError = (event) => {
+    event.target.src = isValidFallback && !isLoading ? props.placeholderImg : PLACEHOLDER_IMAGE;
+  };
+
   const image = props.shouldLazyLoad ? (
     <LazyLoadedImage
       slidesContainerRef={props.slidesContainerRef}
       image={props.image}
       style={style}
+      placeholderImg={props.placeholderImg}
     />
   ) : (
     <img
@@ -120,5 +149,6 @@ Image.propTypes = {
   shouldLazyLoad: PropTypes.bool.isRequired,
   slidesContainerRef: elementRef.isRequired,
   hasCaption: largeWidgetPositions.isRequired,
-  widgetsHasShadow: PropTypes.bool.isRequired
+  widgetsHasShadow: PropTypes.bool.isRequired,
+  placeholderImg: PropTypes.string,
 };

src/components/Slide/Slide.js

@@ -19,6 +19,7 @@ export const Slide = (props) => {
       widgetsHasShadow={props.widgetsHasShadow}
       hasCaption={props.hasCaption}
       slidesContainerRef={props.slidesContainerRef}
+      placeholderImg={props.placeholderImg}
     />
   ) : (
     <UserSlide slide={props.slide} />
@@ -44,5 +45,6 @@ Slide.propTypes = {
   hasCaption: largeWidgetPositions.isRequired,
   slidesContainerRef: elementRef.isRequired,
   reference: elementRef,
-  isCurrent: PropTypes.bool.isRequired
+  isCurrent: PropTypes.bool.isRequired,
+  placeholderImg: PropTypes.string,
 };

src/components/Slides/Slides.js

@@ -38,6 +38,7 @@ export const Slides = (props) => {
             widgetsHasShadow={props.widgetsHasShadow}
             hasCaption={props.hasCaptions}
             isCurrent={index === props.curIndex}
+            placeholderImg={props.placeholderImg}
           />
         );
       })}
@@ -58,5 +59,6 @@ Slides.propTypes = {
   objectFit: objectFitStyles.isRequired,
   widgetsHasShadow: PropTypes.bool.isRequired,
   hasCaptions: largeWidgetPositions.isRequired,
-  curIndex: PropTypes.number
+  curIndex: PropTypes.number,
+  placeholderImg: PropTypes.string,
 };