mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
94.02k stars 32.3k forks source link

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

Open MAG-ME opened 15 hours ago

MAG-ME commented 15 hours ago

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 commented 1 hour ago

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