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

v3: Avatar component does not accept crossorigin prop or actions. #3230

Open
itzTheMeow opened this issue Feb 18, 2025 · 3 comments
Open

v3: Avatar component does not accept crossorigin prop or actions. #3230

itzTheMeow opened this issue Feb 18, 2025 · 3 comments
Labels
feature request Request a feature or introduce and update to the project.

Comments

@itzTheMeow
Copy link

Describe the feature in detail (code, mocks, or screenshots encouraged)

In v2, you were able to pass an action to the Avatar component. This was useful for performing actions on the image after it loaded. In v3 however, this property has been removed. Also in v2, you could set additional props on the avatar such as crossorigin="anonymous", as they were passed to the internal img element. In v3 this is removed.

I'd like to request these features be added back in v3.

What type of pull request would this be?

Enhancement

Provide relevant links or additional information.

No response

@itzTheMeow itzTheMeow added the feature request Request a feature or introduce and update to the project. label Feb 18, 2025
@itzTheMeow
Copy link
Author

Additionally, I'd be willing to submit a PR for this feature if needed.

@endigo9740
Copy link
Contributor

endigo9740 commented Feb 18, 2025

Just keep in mind that Actions are not attributes, they are functional implementation that the Svelte compiler interfaces with. AFAIK they cannot be passed as a arbitrary prop, just like they can't be triggered at runtime. We have been pondering a convention for passing arbitrary props to components that require them, but I'm not sure we've settled on one yet. Ideally this needs to satisfy a few requirements:

  • Ideally it's a convention that works cross-framework (Svelte 5 is closer to React in this regard now)
  • If possible we should be able to target arbitrary properties to multiple component elements (think image + input in a single component)
  • Rich Harris recently teased an alternative for Actions in Svelte that might solve some of this for us. Unfortunately I don't have a link and can't recall the name off hand. His RFC should still be somewhere on their GitHub.

I know this seems like a trivial add, but any PR must take into account the bigger picture here.

In the meantime, you could consider using the Fallback slot with your own <img> element. This would give you full control over it. In fact this is what we will be recommending for Image components like enhance:image for Svelte and the <Image> component from Next.js, Astro, etc.

@itzTheMeow
Copy link
Author

itzTheMeow commented Feb 18, 2025

The action was passed through the action prop on the element in v2, it wasn't arbitrary sorry.

Arbitrary props aren't completely necessary, but a crossorigin one could be implemented for avatars and other image-based components. Not sure if that's in-scope or would get messy however.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature request Request a feature or introduce and update to the project.
Projects
None yet
Development

No branches or pull requests

2 participants