[material-ui][Avatar] Fix slotProps.img not spread to hook (#44536)

Author: siriwatknp

packages/mui-material/src/Avatar/Avatar.js

@@ -163,17 +163,23 @@ const Avatar = React.forwardRef(function Avatar(inProps, ref) {
 
   let children = null;
 
-  // Use a hook instead of onError on the img element to support server-side rendering.
-  const loaded = useLoaded({ ...imgProps, src, srcSet });
-  const hasImg = src || srcSet;
-  const hasImgNotFailing = hasImg && loaded !== 'error';
-
   const ownerState = {
     ...props,
-    colorDefault: !hasImgNotFailing,
     component,
     variant,
   };
+
+  // Use a hook instead of onError on the img element to support server-side rendering.
+  const loaded = useLoaded({
+    ...imgProps,
+    ...(typeof slotProps.img === 'function' ? slotProps.img(ownerState) : slotProps.img),
+    src,
+    srcSet,
+  });
+  const hasImg = src || srcSet;
+  const hasImgNotFailing = hasImg && loaded !== 'error';
+
+  ownerState.colorDefault = !hasImgNotFailing;
   // This issue explains why this is required: https://github.com/mui/material-ui/issues/42184
   delete ownerState.ownerState;
 

packages/mui-material/src/Avatar/Avatar.test.js

@@ -62,6 +62,20 @@ describe('<Avatar />', () => {
       fireEvent.error(img);
       expect(onError.callCount).to.equal(1);
     });
+
+    it('should pass slots.img to `useLoaded` hook', () => {
+      const originalImage = global.Image;
+      const image = {};
+      global.Image = function Image() {
+        return image;
+      };
+
+      render(<Avatar src="/fake.png" slotProps={{ img: { crossOrigin: 'anonymous' } }} />);
+
+      expect(image.crossOrigin).to.equal('anonymous');
+
+      global.Image = originalImage;
+    });
   });
 
   describe('image avatar with unrendered children', () => {