Skip to main content
Version: v12

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:

BaseImage in image attachment
BaseImage in image attachment
BaseImage in image attachment gallery
BaseImage in image attachment gallery
BaseImage in attachment preview
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:


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

Did you find this page helpful?