Skip to main content

Image bubble

This element handles the display for an individual image.

Properties

NameTypeDescription
srcstringURL of the image
placeholderImagestringA filler image to be shown while the actual image is downloading
imageStyleImageStyleStyling properties and values of the element

ImageStyle

Styling properties and values of the element

NameDescription
widthSets the width of the component
heightSets the height of the component
borderSets the border of the component
borderRadiusSets the border radius of the component
backgroundSets all background style properties at once, such as color, image, origin and size, or repeat method. Reference link

Events

Custom events dispatched by the element

NameDescription
cc-image-clickedEvent emitted when user clicks on the image

Usage

import '@cometchat/uikit-elements';//import the web elements package.

const getImageURL = event => {
console.log(event.detail.url); //the detail property has the image url
}

//use the element with the custom event
<cometchat-image-bubble cc-image-clicked={getImageURL}></cometchat-image-bubble>