---
id: base-image
sidebar_position: 9
title: BaseImage
---

import ImageShowcase from '@site/src/components/ImageShowcase';
import BaseImageInGallery from '../../assets/base-image-fallback-in-attachment-gallery.png'
import BaseImageInAttachmentPreview from '../../assets/base-image-fallback-in-attachment-preview.png'
import BaseImageInImageAttachment from '../../assets/base-image-fallback-in-image-attachment.png'

The `BaseImage` component's purpose is to display an image or a fallback if loading the resource has failed. The component is used internally by:

- `Image` component - used to display image attachments in `Message`
- `Gallery` component - used to display image gallery among `Message` attachments
- `AttachmentPreviewList` component - used to display attachment previews in `MessageInput`

The default image fallbacks are rendered as follows:

<ImageShowcase
  border
  items={[
    {
      image: BaseImageInImageAttachment,
      caption: <span>BaseImage in image attachment</span>,
      alt: 'BaseImage in image attachment',
    },
    {
      image: BaseImageInGallery,
      caption: <span>BaseImage in image attachment gallery</span>,
      alt: 'BaseImage in image attachment gallery',
    },
    {
      image: BaseImageInAttachmentPreview,
      caption: <span>BaseImage in attachment preview</span>,
      alt: 'BaseImage in attachment preview',
    },
  ]}
/>

## Usage

### Custom image fallback

The default image fallback can be changed by applying a new CSS data image to the fallback mask in the `BaseImage`'s `<img/>` element. The data image has to be assigned to a CSS variable `--str-chat__image-fallback-icon` within the scope of `.str-chat` class. An example follows:

```css

.str-chat {
  --str-chat__image-fallback-icon: url("data:image/svg+xml;base64, ");
}
```

We can change the mask dimensions or color by applying the following rules to the image's class `.str-chat__base-image--load-failed`, that signals the image load has failed:

```css
:root{
  --custom-icon-fill-color: #223344;
  --custom-icon-width-and-height: 4rem 4rem;
}

.str-chat__base-image--load-failed {
  mask-size: var(--custom-icon-width-and-height);
  -webkit-mask-size: var(--custom-icon-width-and-height);
  background-color: var(--custom-icon-fill-color);
}
```

### Custom BaseImage

The default `BaseImage` can be overridden by passing a custom component to `Channel` props:


```tsx
import {ComponentProps } from 'react';
import { Channel } from 'stream-chat-react';

const CustomBaseImage = (props: ComponentProps<'img'>) => {
    // your implementation...
}

export const MyUI = () => {
  return (
    <Channel BaseImage={CustomBaseImage}>
      {{/* more components */ }}
    </Channel>
  );
};
```

## Props

The component accepts the `img` component props.

