BaseImage

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:

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:


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

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:

: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:

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.

Avatar

Poll

BaseImage

Usage

Custom image fallback

Custom BaseImage

Props