Create an avatar component whose image is served from an external source that requires the cross origin property to be set
Use the slotProps / img settings to specify the crossOrigin setting
The request will fail and you will see this error in the console net::ERR_BLOCKED_BY_RESPONSE.NotSameOrigin
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.
Steps to reproduce
Steps:
slotProps
/img
settings to specify thecrossOrigin
settingnet::ERR_BLOCKED_BY_RESPONSE.NotSameOrigin
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
``` 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 ```npx @mui/envinfo
Search keywords: Avatar imgProps