packages/react-components/react-image/library/docs/Spec.md
Image is a visual representation of some content, such as a photo, illustration etc.
Based on the OpenUI research and the Figma specification, Image seems to be one of those components that is purely styling, thus I would appreciate your answers in any of these questions:
Are there any components would need to use Image?
Apart from styling, are there any other functionalities for Image?
Conclusion: Some potential features that Image can have are:
Is there any benefit of having Image as a component? (taking into consideration that it is css styling and we will need to maintain it over time.)
Conclusion: The image component will ensure correct styling and behaviour regardless of the Theme
Comparison done in: #17608
| Purpose | v7 / v8 | v0 | Matching |
|---|---|---|---|
| Additional CSS class name(s) to apply | className | className | matching |
| Specifies the cover style to be used for this image | coverStyle | N/A | v0 missing |
| Replaces the src in case of errors | errorSrc [DEPRECATED] | N/A | See onLoadingStateChanged |
| Determines how the image is scaled and cropped to fit the frame | imageFit | fluid | partially matching |
| Expands image frame to fill its parent container | maximizeFrame | fluid | partially matching |
| Optional callback for when the image load state changed | onLoadingStateChanged | N/A | v0 missing |
| Fades the image in when loaded | shouldFadeIn | N/A | v0 missing |
| The image starts as visible and is hidden on error | shouldStartVisible | N/A | v0 missing |
| Provides customized styling that will layer on top of the variant rules | styles | styles | matching |
| Theme provided by HOC | theme | variables | matching |
| Accessibility behavior overridden by the user | N/A | accessibility | v7/v8 missing |
| An element type to render as (string or component) | N/A | as | v7/v8 missing |
| An image may be formatted to appear inline with text as an avatar | N/A | avatar | v7/v8 missing |
| An image can appear circular | N/A | circular | v7/v8 missing |
| Component design prop | N/A | design | v7/v8 missing |
| Image source URL | N/A | src | v7/v8 missing |
import { Image, ImageFit } from '@fluentui/react/lib/Image';
<Image maximizeFrame imageFit={ImageFit.contain} src="..." alt="Example of the image component in v8" />;
<Image block src="..." alt="Example of the image component in v0" />
n/a
See API at Image.types.ts.
Proposed component props:
| Name | Type | Default value | Comments |
|---|---|---|---|
bordered | boolean | false | |
fit | string | "none" | One of: none, center, contain, cover |
block | boolean | false | |
shape | string | "square" | One of: square, circular , rounded |
shadow | boolean | false |
All native html attributes of the `` will be available to be used as props of the Image component.
Sample code based on the proposed API:
<Image bordered src="..." />
<Image block src="..." />
<Image shape="rounded" src="..." />
<Image shape="circular" src="..." />
// None
<Image fit="none" src="..." />
// Center
<Image fit="center" src="..." />
// Contain
<Image fit="contain" src="..." />
// Cover
<Image fit="cover" src="..." />
<Image src=".." />
<slots.root {...slotProps.root} />
See MIGRATION.md.
Images should include the alt attribute that includes a description of the image's content and function to be accessible to assistive technologies. The alt description should be concise and clearly communicate the meaning and purpose of the image on where it was included. Avoid using "image of", "picture of" etc. as it is redundant.
The images that are only decorative and do not have the structural relevance implied by the semantic element should use the alt="" (null alt text) or role="presentation"/role="none" which will remove the semantic meaning of the element. In case the image is needed to be removed from the accessibility tree then aria-hidden="true" can be used.