---
title: Image | UI
description: The Image component allows one to display images.
pageTitle: Image
pageDescription: The Image component allows one to display images.
showHeader: true
---

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

<Meta title="components/Media And Icons/Image" />

import { Image } from './Image';
import { VStack } from './ImageSizes';
import { transformedCode } from '../../../utils';
import Wrapper from '../../Wrapper';

import { AppProvider, CodePreview, Text } from '@gluestack/design-system';

# Installation

This command copies the `Image` component to your project.

```jsx
npx install @gluestack-ui add image
```

## Import

```jsx
// import the component from your component folder
import { Image } from 'components';
```

# Basic

<AppProvider>
  <CodePreview
    showComponentRenderer={true}
    showArgsController={false}
    metaData={{
      code: ` 
 <Image
  w={100}
  h={100}
  source={{
    uri: 'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg',
  }}
  fallbackSource={{
    uri: 'https://images.unsplash.com/photo-1575936123452-b67c3203c357?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aW1hZ2V8ZW58MHx8MHx8&w=1000&q=80',
  }}
/>
    `,
      transformCode: (code) => {
        return transformedCode(code);
      },
      scope: { Wrapper, Image },
      argsType: {},
    }}
  />
</AppProvider>

<br />

## Anatomy

The image component consists of the following parts:

```jsx
export default () => <Image />;
```

## API Reference

### Image

It inherits all the properties of React Native's [Image](https://reactnative.dev/docs/image#props) component.

<br />
<br />

## Examples

### Image sizes

<AppProvider>
  <CodePreview
    showComponentRenderer={true}
    showArgsController={false}
    metaData={{
      code: `
<VStack space="md" alignItems="center">
  {['xs', 'sm', 'md', 'lg', 'xl', '2xl'].map((size, index) => (
    <Image
      source={{
        uri: "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg",
      }}
      size={size}
      borderRadius={"$full"}
      fallbackSource={{
        uri: "https://images.unsplash.com/photo-1575936123452-b67c3203c357?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aW1hZ2V8ZW58MHx8MHx8&w=1000&q=80",
      }}
      key={index}
    />
  ))}
</VStack>
`,
      scope: { Wrapper, Image, VStack },
      argsType: {},
    }}
  />
</AppProvider>

<br />

# Advanced

## Customizing the Image

For customizing the Image, you have to map styled Image to Image. You can refer [dank.style](https://dank.style/) for more information on how to use styled components.

### Usage

```jsx
// import the styles
import { Root } from '../components/core/image/styled-components';

// mapping the Image to root component
const Image = Root;

// Using the Image component
export default () => <Image />;
```

Default styling of the component can be found in the `components/core/image` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/development/example/storybook/src/components/Image/index.tsx) of the styled `Image` component.

### How to use Next.js Image

By default, Image component uses Native Image component. If you want to use Next.js Image component, you have to create a new styled component for image and map it to Image component. You can also change the already present styled-component for images on the path `./components/core/button/styled-components` in your project.

```jsx
import Image from 'next/image';
import { styled } from '@dank-style/react';

// Using the Next Image component
const StyledImage = styled(Image, styling, componentConfig, extenedBaseConfig);

// if some styling are direct props, you can pass them as props in the styling
props: {
  w: 100,
  h: 100,
  borderRadius: '$full',
}

// you can also https://dank.style/docs/getting-started/styled to style the component


export default () => <StyledImage />;
```

### How to use Expo Image

In expo, Image component doesn't accept dataSet prop in the components. So, you have to pass config to not optimize the Image component on web in the styled function to make it work.

```jsx
import Image from 'expo-image';
import { styled } from '@dank-style/react';

// Using the Expo Image component
const StyledImage = styled(Image, styling, componentConfig, extenedBaseConfig);

export default () => <StyledImage />;
```