ContextQMD
Back to Fluentui

Image Migration

apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Image.mdx

4.40.2-hotfix24.1 KB
Original Source

import { Meta } from '@storybook/addon-docs/blocks';

<Meta title="Concepts/Migration/from v0/Components/Image Migration" />

Image Migration

Overview:

Before:

tsx
import { Image } from '@fluentui/react-northstar';
const Component = () => <Image />;

After:

tsx
import { Image } from '@fluentui/react-components';
const Component = () => <Image />;

How to migrate props:

Image propsmigrate guide
as, classNamekeep it as is
src, alt, aria-label, key, refkeep it as is
aria-hiddenif `alt` property is empty and image is illustrative or not relevant for screen reader users, it's **required** to add `aria-hidden="true"` attribute (in v0 it was applied bt default)
variables, design, stylessee Migrate style overrides in this document
accessibilitysee [migrate-custom-accessibility.md](?path=/docs/concepts-migration-from-v0-custom-accessibility--docs)
fluidreplace with `fit="contain"`
circularreplace with `shape="circular"`
avatarsee Migrate avatar prop in this document

Migrate style overrides

⚠️ If this is your first migration, please read the general guide on how to migrate styles.

Example for migrate boolean variables:

Before:

tsx
// in COMPONENT_NAME.tsx
import { Image } from '@fluentui/react-northstar';

export const Component = () => <Image variables={{ isCustomImage: true }} />;

// in image-styles.ts
export const imageStyles1 = {
  root: ({ variables: { isCustomImage } }) => ({
    ...(isCustomImage && {
      opacity: 0.75,
    }),
  }),
};

After:

tsx
// in COMPONENT_NAME.tsx
import { Image } from '@fluentui/react-components';
import { useStyles } from './COMPONENT_NAME.styles.ts';

export const Component = () => {
  const classes = useStyles();
  return <Image className={classes.customImage} />;
};

// in COMPONENT_NAME.styles.ts
import { makeStyles } from '@fluentui/react-components';

export const useStyles = makeStyles({
  customImage: {
    opacity: 0.75,
  },
});

Migrate avatar prop

Use Avatar component instead of Image with prop avatar when you need to render avatar.

Before:

tsx
import { Image } from '@fluentui/react-northstar';
const Component = () => <Image alt="someone's avatar" src="avatar_url" avatar />;

After:

tsx
import { Avatar } from '@fluentui/react-components';
const Component = () => <Avatar image={{ alt: "someone's avatar", src: 'avatar_url' }} />;