Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
MAG-ME opened this issue Nov 21, 2024 · 3 comments
Labels
component: avatar This is the name of the generic UI component, not the React module! status: waiting for maintainer These issues haven't been looked at yet by a maintainer v6.x migration

Comments

@MAG-ME
Copy link

MAG-ME commented Nov 21, 2024

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

@MAG-ME MAG-ME added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Nov 21, 2024
@siriwatknp
Copy link
Member

siriwatknp commented Nov 22, 2024

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

@siriwatknp siriwatknp added status: waiting for author Issue with insufficient information component: avatar This is the name of the generic UI component, not the React module! v6.x v6.x migration and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer v6.x labels Nov 22, 2024
@MAG-ME
Copy link
Author

MAG-ME commented Nov 22, 2024

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;

@github-actions github-actions bot added status: waiting for maintainer These issues haven't been looked at yet by a maintainer and removed status: waiting for author Issue with insufficient information labels Nov 22, 2024
@MAG-ME
Copy link
Author

MAG-ME commented Nov 22, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: avatar This is the name of the generic UI component, not the React module! status: waiting for maintainer These issues haven't been looked at yet by a maintainer v6.x migration
Projects
None yet
Development

No branches or pull requests

2 participants