Image | CoreAI design system

Default

Loading interactive example. Full source is available below.

View example source

// 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 (<Image {...props} alt="Allan's avatar" src="https://fabricweb.azureedge.net/fabric-website/assets/images/avatar/AllanMunger.jpg"/>);
};

export default Default;

Resources

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.

API referenceGenerated CoreAI prop and type summaries

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.

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<HTMLImageElement>;

  /**
   * 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.

Import components from @coreai-ds/react-components. CoreAI guidance above takes precedence over API demonstration examples.

Block

Loading interactive example. Full source is available below.

Download source

// 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 => (<>
    <Image block src="https://fabricweb.azureedge.net/fabric-website/placeholders/900x50.png" alt="Image placeholder"/>
    <Image block src="https://fabricweb.azureedge.net/fabric-website/placeholders/100x100.png" alt="Image placeholder"/>
  </>);

export default Block;

Bordered

Loading interactive example. Full source is available below.

Download source

// 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 => (<div>
    <div style={{ display: 'flex', gap: 8 }}>
      <Image alt="Allan's avatar" src="https://fabricweb.azureedge.net/fabric-website/assets/images/avatar/AllanMunger.jpg" height={200} width={200}/>
      <Image alt="Amanda's avatar" shape="rounded" src="https://fabricweb.azureedge.net/fabric-website/assets/images/avatar/AmandaBrady.jpg" height={200} width={200}/>
      <Image alt="Erik's avatar" shape="circular" src="https://fabricweb.azureedge.net/fabric-website/assets/images/avatar/ErikNason.jpg" height={200} width={200}/>
    </div>
    <div style={{ display: 'flex', gap: 8, marginTop: '15px' }}>
      <Image alt="Allan's avatar" bordered src="https://fabricweb.azureedge.net/fabric-website/assets/images/avatar/AllanMunger.jpg" height={200} width={200}/>
      <Image alt="Amanda's avatar" bordered shape="rounded" src="https://fabricweb.azureedge.net/fabric-website/assets/images/avatar/AmandaBrady.jpg" height={200} width={200}/>
      <Image alt="Erik's avatar" bordered shape="circular" src="https://fabricweb.azureedge.net/fabric-website/assets/images/avatar/ErikNason.jpg" height={200} width={200}/>
    </div>
  </div>);

export default Bordered;

Fallback

Loading interactive example. Full source is available below.

Download source

// 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 => (<div style={{ display: 'flex', gap: 8 }}>
    <Image alt="Allan's avatar" bordered src="https://fabricweb.azureedge.net/fabric-website/assets/images/avatar/AllanMunger.jpg" height={200} width={200}/>
    <Image alt="Non-existing avatar" bordered src="https://fabricweb.azureedge.net/fabric-website/assets/images/avatar/non-existing-png.jpg" height={200} width={200}/>
  </div>);

export default Fallback;

Fit

Loading interactive example. Full source is available below.

Download source

// 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 => (<>
    <h1>None</h1>
    <div style={{ border: '1px solid green', height: 150, width: 300 }}>
      <Image src="https://fabricweb.azureedge.net/fabric-website/placeholders/600x200.png" alt="Image placeholder" fit="none"/>
    </div>
    <br />
    <div style={{ border: '1px solid green', height: 150, width: 300 }}>
      <Image src="https://fabricweb.azureedge.net/fabric-website/placeholders/200x100.png" alt="Image placeholder" fit="none"/>
    </div>

    <h1>Center</h1>
    <div style={{ border: '1px solid green', height: 150, width: 300 }}>
      <Image src="https://fabricweb.azureedge.net/fabric-website/placeholders/600x200.png" alt="Image placeholder" fit="center"/>
    </div>
    <br />
    <div style={{ border: '1px solid green', height: 150, width: 300 }}>
      <Image src="https://fabricweb.azureedge.net/fabric-website/placeholders/200x100.png" alt="Image placeholder" fit="center"/>
    </div>

    <h1>Contain</h1>
    <div style={{ border: '1px solid green', height: 200, width: 400 }}>
      <Image src="https://fabricweb.azureedge.net/fabric-website/placeholders/400x200.png" alt="Image placeholder" fit="contain"/>
    </div>
    <br />
    <div style={{ border: '1px solid green', height: 250, width: 400 }}>
      <Image src="https://fabricweb.azureedge.net/fabric-website/placeholders/400x200.png" alt="Image placeholder" fit="contain"/>
    </div>
    <br />
    <div style={{ border: '1px solid green', height: 200, width: 450 }}>
      <Image src="https://fabricweb.azureedge.net/fabric-website/placeholders/400x200.png" alt="Image placeholder" fit="contain"/>
    </div>

    <h1>Cover</h1>
    <div style={{ border: '1px solid green', height: 200, width: 400 }}>
      <Image src="https://fabricweb.azureedge.net/fabric-website/placeholders/400x250.png" alt="Image placeholder" fit="cover"/>
    </div>
    <br />
    <div style={{ border: '1px solid green', height: 200, width: 400 }}>
      <Image src="https://fabricweb.azureedge.net/fabric-website/placeholders/400x300.png" alt="Image placeholder" fit="cover"/>
    </div>
    <br />
    <div style={{ border: '1px solid green', height: 200, width: 400 }}>
      <Image src="https://fabricweb.azureedge.net/fabric-website/placeholders/600x200.png" alt="Image placeholder" fit="cover"/>
    </div>
  </>);

export default Fit;

Shadow

Loading interactive example. Full source is available below.

Download source

// 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 => (<Image shadow src="https://fabricweb.azureedge.net/fabric-website/placeholders/300x300.png" alt="Image placeholder"/>);

export default Shadow;

Shape

Loading interactive example. Full source is available below.

Download source

// 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 => (<div style={{ display: 'flex', gap: 8 }}>
    <Image alt="Allan's avatar" src="https://fabricweb.azureedge.net/fabric-website/assets/images/avatar/AllanMunger.jpg" height={200} width={200}/>
    <Image alt="Erik's avatar" shape="circular" src="https://fabricweb.azureedge.net/fabric-website/assets/images/avatar/ErikNason.jpg" height={200} width={200}/>
    <Image alt="Amanda's avatar" shape="rounded" src="https://fabricweb.azureedge.net/fabric-website/assets/images/avatar/AmandaBrady.jpg" height={200} width={200}/>
  </div>);

export default Shape;