Avatar component has imgProps marked as deprecated but the suggested alternative does not work

[MAG-ME]

Steps to reproduce

Steps:

1. Create an avatar component whose image is served from an external source that requires the cross origin property to be set
2. Use the slotProps / img settings to specify the crossOrigin setting
3. The request will fail and you will see this error in the console net::ERR_BLOCKED_BY_RESPONSE.NotSameOrigin
4. Replace slotProps with the old but deprecated imgProps property with the same settings and see how the request now works.

Current behavior

Requests will fail with net::ERR_BLOCKED_BY_RESPONSE.NotSameOrigin

Expected behavior

Requests should not fail

Context

We upgraded our code using the suggested command npx @mui/codemod@latest deprecations/all <path> which updated the code correctly but raised this issue.

Your environment

npx @mui/envinfo

 
  System:
    OS: Linux 5.15 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish)
  Binaries:
    Node: 20.11.1 - /usr/local/bin/node
    npm: 8.19.4 - ~/Projects/_2024/oly-web-client/node_modules/.bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 131.0.6778.71
  npmPackages:
    @emotion/react:  11.11.1 
    @emotion/styled:  11.11.0 
    @mui/core-downloads-tracker:  6.1.5 
    @mui/material: 6.1.5 => 6.1.5 
    @mui/private-theming:  6.1.5 
    @mui/styled-engine:  6.1.5 
    @mui/system:  6.1.5 
    @mui/types:  7.2.18 
    @mui/utils:  6.1.5 
    @mui/x-internals:  7.21.0 
    @mui/x-tree-view: ^7.21.0 => 7.21.0 
    @types/react: 18.0.20 => 18.0.20 
    react: 18.2.0 => 18.2.0 
    react-dom: 18.2.0 => 18.2.0 
    typescript: 5.3.2 => 5.3.2 

Search keywords: Avatar imgProps

[siriwatknp]

Please provide a reproducible sandbox. What are the attributes of <img> you see in the devtool?

[MAG-ME]

The attribute I am concerned with is crossOrigin, but I don't believe any of the attributes from slotProps:img are being applied.
The attributes available for slotProps:img are the same as those for imgProps

        crossOrigin?: "anonymous" | "use-credentials" | "" | undefined;
        decoding?: "async" | "auto" | "sync" | undefined;
        height?: number | string | undefined;
        loading?: "eager" | "lazy" | undefined;
        referrerPolicy?: HTMLAttributeReferrerPolicy | undefined;
        sizes?: string | undefined;
        src?: string | undefined;
        srcSet?: string | undefined;
        useMap?: string | undefined;
        width?: number | string | undefined;

[MAG-ME]

Code sandbox example here:
https://codesandbox.io/p/sandbox/avatar-imgprops-demo-7jdnp5

[siriwatknp]

Thanks, I will fix it asap.