handle alt better

Author: nemanjam

src/components/react/ImageBlurPreloader.tsx

@@ -52,7 +52,6 @@ const ImageBlurPreloader: FC<Props> = ({
     // blur image must use size from main image
     width: mainAttributes.width,
     height: mainAttributes.height,
-    alt: !isLoadingMain ? mainAttributes.alt : '',
   };
 
   const hasImage = Boolean(
@@ -69,6 +68,7 @@ const ImageBlurPreloader: FC<Props> = ({
           <img
             {...blurAttributes}
             {...commonAttributes}
+            alt={!isLoadingBlur ? blurAttributes.alt : ''}
             onLoad={() => setIsLoadingBlur(false)}
             className={cn('object-cover absolute top-0 left-0 size-full', className)}
           />
@@ -77,6 +77,7 @@ const ImageBlurPreloader: FC<Props> = ({
           <img
             {...mainAttributes}
             {...commonAttributes}
+            alt={!isLoadingMain ? mainAttributes.alt : ''}
             onLoad={handleLoadMain}
             className={cn(
               'object-cover absolute top-0 left-0 size-full',

src/components/react/ImageRandom.tsx

@@ -42,7 +42,7 @@ const ImageRandomReact: FC<Props> = ({ galleryImages, className, divClassName, .
   return (
     <ImageBlurPreloader
       {...props}
-      blurAttributes={{ ...image.blur, alt: '' }}
+      blurAttributes={{ ...image.blur, alt: 'Blur image' }}
       mainAttributes={{ ...image.hero, onClick: handleClick, alt: 'Hero image' }}
       className={cn('cursor-pointer my-0', className)}
       divClassName={divClassName}