Image Bubble

This element handles the display for an individual image.

Properties

Name	Type	Description
src	string	URL of the image
placeholderImage	string	A filler image to be shown while the actual image is downloading
imageStyle	ImageStyle	Styling properties and values of the element

ImageStyle

Styling properties and values of the element

Name	Description
width	Sets the width of the component
height	Sets the height of the component
border	Sets the border of the component
borderRadius	Sets the border radius of the component
background	Sets 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

Name	Description
cc-image-clicked	Event emitted when user clicks on the image

Usage

JavaScript

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>