feat(827): Added fallback on image if is error

components/ImageGallery/imageGallery.module.css

@@ -27,16 +27,17 @@
 .imagePlaceholder {
   height: 100%;
   min-height: 190px;
+  aspect-ratio: 16/9;
   width: 100%;
   background-color: #fff;
   background-image: linear-gradient(45deg, #000000 25%, transparent 25%),
     linear-gradient(-45deg, #000000 25%, transparent 25%),
     linear-gradient(45deg, transparent 75%, #000000 75%),
     linear-gradient(-45deg, transparent 75%, #000000 75%);
-  background-size: 160px 160px;
+  background-size: 180px 180px;
   background-position:
     0 0,
-    0 80px,
+    0 90px,
-    80px -80px,
+    90px -90px,
-    -80px 0;
+    -90px 0;
 }

components/ImageGallery/index.tsx

@@ -20,9 +20,10 @@ export default function ImageGallery({
 }: ImageGalleryProps) {
   const intl = useIntl()
   const [lightboxIsOpen, setLightboxIsOpen] = useState(false)
+  const [imageError, setImageError] = useState(false)
   const imageProps = fill ? { fill } : { height, width: height * 1.5 }
 
-  if (!images || images.length === 0) {
+  if (!images || images.length === 0 || imageError) {
     return <div className={styles.imagePlaceholder} />
   }
 
@@ -38,6 +39,7 @@ export default function ImageGallery({
           className={styles.image}
           src={images[0].imageSizes.medium}
           alt={images[0].metaData.altText}
+          onError={() => setImageError(true)}
           {...imageProps}
         />
         <div className={styles.imageCount}>