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 inMessage
Gallery
component - used to display image gallery amongMessage
attachmentsAttachmentPreviewList
component - used to display attachment previews inMessageInput
The default image fallbacks are rendered as follows:
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.