[Avatar] Support cross origin in useImageLoadingStatus (#1433)

Co-authored-by: Michał Dudak <[email protected]>
mui · Feb 13, 2025 · 36da5a5 · 36da5a5
1 parent e896408
commit 36da5a5
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 5 deletions.
diff --git a/packages/react/src/avatar/image/AvatarImage.tsx b/packages/react/src/avatar/image/AvatarImage.tsx
@@ -25,11 +25,15 @@ const AvatarImage = React.forwardRef<HTMLImageElement, AvatarImage.Props>(functi
     render,
     onLoadingStatusChange: onLoadingStatusChangeProp,
     referrerPolicy,
+    crossOrigin,
     ...otherProps
   } = props;
 
   const context = useAvatarRootContext();
-  const imageLoadingStatus = useImageLoadingStatus(props.src, referrerPolicy);
+  const imageLoadingStatus = useImageLoadingStatus(props.src, {
+    referrerPolicy,
+    crossOrigin,
+  });
 
   const handleLoadingStatusChange = useEventCallback((status: ImageLoadingStatus) => {
     onLoadingStatusChangeProp?.(status);
@@ -86,6 +90,10 @@ AvatarImage.propTypes /* remove-proptypes */ = {
    * returns a class based on the component’s state.
    */
   className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  /**
+   * @ignore
+   */
+  crossOrigin: PropTypes.oneOf(['', 'anonymous', 'use-credentials']),
   /**
    * Callback fired when the loading status changes.
    */

diff --git a/packages/react/src/avatar/image/useImageLoadingStatus.ts b/packages/react/src/avatar/image/useImageLoadingStatus.ts
@@ -5,9 +5,14 @@ import { useEnhancedEffect } from '../../utils/useEnhancedEffect';
 
 export type ImageLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error';
 
+interface UseImageLoadingStatusOptions {
+  referrerPolicy?: React.HTMLAttributeReferrerPolicy;
+  crossOrigin?: React.ImgHTMLAttributes<HTMLImageElement>['crossOrigin'];
+}
+
 export function useImageLoadingStatus(
-  src?: string,
-  referrerPolicy?: React.HTMLAttributeReferrerPolicy,
+  src: string | undefined,
+  { referrerPolicy, crossOrigin }: UseImageLoadingStatusOptions,
 ): ImageLoadingStatus {
   const [loadingStatus, setLoadingStatus] = React.useState<ImageLoadingStatus>('idle');
 
@@ -31,15 +36,16 @@ export function useImageLoadingStatus(
     setLoadingStatus('loading');
     image.onload = updateStatus('loaded');
     image.onerror = updateStatus('error');
-    image.src = src;
     if (referrerPolicy) {
       image.referrerPolicy = referrerPolicy;
     }
+    image.crossOrigin = crossOrigin ?? null;
+    image.src = src;
 
     return () => {
       isMounted = false;
     };
-  }, [src, referrerPolicy]);
+  }, [src, crossOrigin, referrerPolicy]);
 
   return loadingStatus;
 }