[Avatar] Support cross origin in useImageLoadingStatus

[ISnackable]

Description

Add crossOrigin Support to useImageLoadingStatus Hook.

This PR adds crossOrigin support to the useImageLoadingStatus hook to handle images hosted on external domains that require specific crossOrigin settings (anonymous or use-credentials).

By including this option, we ensure broader compatibility with external image sources and resolve potential loading issues.

Note: radix-ui/primitives(https://github.com/radix-ui/primitives) has this exact issue and already has a PR radix-ui/primitives#3261. So here's a corresponding PR for Base UI 😊

• I have followed (at least) the PR section of the contributing guide.

[netlify]

✅ Deploy Preview for base-ui ready!

Name	Link
🔨 Latest commit	bda28ef
🔍 Latest deploy log	https://app.netlify.com/sites/base-ui/deploys/67ad5b4c9d943600089a7320
😎 Deploy Preview	https://deploy-preview-1433--base-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[michaldudak]

Thanks for your contribution!
I added a few comments. Could you also run pnpm proptypes and commit the changed files after you resolve them so proptypes definitions are generated?

[ISnackable]

My bad, I didn't even notice the proptypes. 😅 I think that should be all, do let me know if there's anything else. Thanks!

[michaldudak]

Is this check necessary? If crossOrigin is undefined, it'll be passed as such to image and it should still work, no?

[ISnackable]

Well, according to MDM CrossOrigin Docs:

The crossorigin content attribute on media elements is a CORS settings attribute.

These attributes are enumerated, and have the following possible values:

anonymous
Request uses CORS headers and credentials flag is set to 'same-origin'. There is no exchange of user credentials via cookies, client-side TLS certificates or HTTP authentication, unless destination is the same origin.

use-credentials
Request uses CORS headers, credentials flag is set to 'include' and user credentials are always included.

""
Setting the attribute name to an empty value, like crossorigin or crossorigin="", is the same as anonymous.

An invalid keyword and an empty string will be handled as the anonymous keyword.

Assuming that an image is loading from a cors server, without the image.crossOrigin set, the image.src will hit a cors error, then image.onload will never be called. Which mean the image won't render. So by checking if it's a string type (empty string/invalid strings), this way we can just treat it as how MDM defined crossOrigin.

Hopefully that make sense.

[ISnackable]

In short, we would want to make sure "" is assigned to image.crossOrigin.

[michaldudak]

I meant if an invalid or undefined crossOrigin is passed to AvatarImage, it should be forwarded as-is to useImageLoadingStatus. By adding if (typeof crossOrigin === 'string') {, we're actually changing the behavior described in MDN, because if someone set <AvatarImage crossOrigin={42}>, this implementation would not set crossOrigin on an image at all, whereas, according to MDN, it should treat it as "anonymous".

[ISnackable]

Yes, you're right. Fixed it. Had to do an nullish check since image.crossOrigin doesn't accept an undefined type.

[michaldudak]

Thanks, it looks good now!