Open mrtzdev opened 2 years ago
This seems reasonable. Not sure if there are any others we would want to include, short of extending https://github.com/microsoft/TypeScript/blob/9767f51758c2899ad09c3466fd6ebbde79f53f63/lib/lib.dom.d.ts#L6925
ok, i think the following attributes are also useful and important:
srcset and sizes ( for responsive images )
width and height ( to optimize Cumulative Layout Shift (cls) and prevent layout shifts )
decoding ( https://html.spec.whatwg.org/multipage/images.html#image-decoding-hint )
In my use case, i also need a onload event with a callback. onLoad onError props ?
We should also include a complete example of a responsive image with srcset etc. in the docs.
@mrtzdev Mind sharing what you are using Image for? Could you use a img
element instead?
@LFDanLu I could use the img element instead and build my own image component.. But I think the attributes are really useful for a image component like this:
Other Examples: chakra ui image component: https://chakra-ui.com/docs/components/image/props
pinterest gestalt ui: https://gestalt.pinterest.systems/web/image
next/image https://nextjs.org/docs/api-reference/next/image
What is the downside if we add it ?
The team is a bit wary of overloading the Image component since at its core it intended for use within other React Spectrum components (hence why useSlotProps
exists within it) rather than being a straight up replacement for the img
element everywhere. That being said, we aren't dismissing the possibility of adding the loading
attribute or other attributes to it, we just haven't run into a use case within our components that needed it or any other extra attributes.
For now I'd recommend that you use the img
element if at all possible and we can keep this issue open since we maybe introducing loading
when Cards/CardView gets further along.
okay that make sense. Thanks for your reply.
π Feature Request
Support for loading attribute on Image Component (@react-spectrum/image) via a prop: loading.
The loading attribute allows a browser to defer loading offscreen images until users scroll near them: https://web.dev/browser-level-image-lazy-loading/ https://html.spec.whatwg.org/multipage/urls-and-fetching.html#lazy-loading-attributes
π€ Expected Behavior
It should be possible to add a prop "loading" on the Image Component like this:
Type: loading?: "eager" | "lazy"
π― Current Behavior
Currently it is not possible to add a loading prop to the Image Component. It is not rendered on the img element.
π Possible Solution
The loading attribute could be added like this:
@react-spectrum/image/src/Image.tsx https://github.com/adobe/react-spectrum/blob/main/packages/%40react-spectrum/image/src/Image.tsx
and in @react-types/image: https://github.com/adobe/react-spectrum/blob/main/packages/%40react-types/image/src/index.d.ts
Good idea ? Can I open a PR for this ?
π¦ Context
π» Examples
π§’ Your Company/Team
π Tracking Ticket (optional)