# Image
Images, like photos and illustrations, help reinforce a message and express your product or app's style.
## Behavior and states
- Use the shadow prop sparingly to give an image additional prominence.
- Use the alt prop to provide a brief but accurate text attribution for images.
- If an image is solely decorative, use role="presentation" to hide it from assistive technologies.
## Default
Source: CoreAI.
[Download source](/coreai-design-system/source/examples/components-image--default.tsx)
```tsx
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.
import type { ImageProps } from "@coreai-ds/react-components";
import type { JSXElement } from "@coreai-ds/react-components";
import { Image } from "@coreai-ds/react-components";
import * as React from 'react';
export const Default = (props: ImageProps): JSXElement => {
return ();
};
export default Default;
```
## API
Generated CoreAI prop summaries, not replacement type declarations. Most native DOM/event and ARIA props are omitted. `?` means optional; JSDoc shows defaults, deprecations, and conditional requirements. Defaults assume the standard CoreAI provider.
### Image API
The Image component ensures the consistent styling of images.
```ts
interface ImageProps {
as?: "img";
/**
* An image can take up the width of its container.
* @default false
*/
block?: boolean;
/**
* An image can appear with a rectangular border.
* @default false
*/
bordered?: boolean;
children?: undefined;
className?: string;
/**
* An image can set how it should be resized to fit its container.
* @default 'default'
*/
fit?: "center" | "none" | "default" | "contain" | "cover";
ref?: Ref;
/**
* An image can appear elevated with shadow.
* @default false
*/
shadow?: boolean;
/**
* An image can appear square, circular, or rounded.
* @default 'square'
*/
shape?: "circular" | "rounded" | "square";
style?: CSSProperties;
}
```
## Implementation
CoreAI 0.12.0; Fluent 9.74.9.
[Setup and dependencies](/coreai-design-system/guides/Package.md).
Import components from `@coreai-ds/react-components`. CoreAI guidance above takes precedence over API demonstration examples.
## Block
Source: Fluent, adapted for CoreAI.
An Image can be maximized in order to fill its parent container.
[Download source](/coreai-design-system/source/examples/components-image--block.tsx)
```tsx
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.
import type { JSXElement } from "@coreai-ds/react-components";
import { Image } from "@coreai-ds/react-components";
import * as React from 'react';
export const Block = (): JSXElement => (<>
);
export default Block;
```
## Bordered
Source: Fluent, adapted for CoreAI.
The `bordered` prop will apply a border style to images regardless of its shape.
[Download source](/coreai-design-system/source/examples/components-image--bordered.tsx)
```tsx
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.
import type { JSXElement } from "@coreai-ds/react-components";
import { Image } from "@coreai-ds/react-components";
import * as React from 'react';
export const Bordered = (): JSXElement => ();
export default Bordered;
```
## Fallback
Source: Fluent, adapted for CoreAI.
In cases when images fail to load, the Image component will result into the native `![]()
` browser fallback.
[Download source](/coreai-design-system/source/examples/components-image--fallback.tsx)
```tsx
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.
import type { JSXElement } from "@coreai-ds/react-components";
import { Image } from "@coreai-ds/react-components";
import * as React from 'react';
export const Fallback = (): JSXElement => (
);
export default Fallback;
```
## Fit
Source: Fluent, adapted for CoreAI.
The `fit` prop is used to determine how the image should be resized in order to fit its container.
The image can be resized in various ways: centering to its container(`center`),
filling its container (`cover`) or preserving the aspect ratio (`contain`).
[Download source](/coreai-design-system/source/examples/components-image--fit.tsx)
```tsx
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.
import type { JSXElement } from "@coreai-ds/react-components";
import { Image } from "@coreai-ds/react-components";
import * as React from 'react';
export const Fit = (): JSXElement => (<>
None
Center
Contain
Cover
);
export default Fit;
```
## Shadow
Source: Fluent, adapted for CoreAI.
The shadow prop will apply box shadow styling to the image.
[Download source](/coreai-design-system/source/examples/components-image--shadow.tsx)
```tsx
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.
import type { JSXElement } from "@coreai-ds/react-components";
import { Image } from "@coreai-ds/react-components";
import * as React from 'react';
export const Shadow = (): JSXElement => ();
export default Shadow;
```
## Shape
Source: Fluent, adapted for CoreAI.
Images can be styled as square (default), circular, or with rounded corners.
[Download source](/coreai-design-system/source/examples/components-image--shape.tsx)
```tsx
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.
import type { JSXElement } from "@coreai-ds/react-components";
import { Image } from "@coreai-ds/react-components";
import * as React from 'react';
export const Shape = (): JSXElement => (
);
export default Shape;
```
## Resources
- [Figma component](https://www.figma.com/design/eXfSQrRg3poHRgmr0ivN5V/CoreAI-Figma-Library?node-id=417322-8489)
- [Fluent guidance](https://fluent2.microsoft.design/components/web/react/core/image/usage)