> ## Documentation Index
> Fetch the complete documentation index at: https://www.cometchat.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Image Bubble

> Image Bubble — CometChat documentation.

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](/web-elements/image-bubble#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](https://developer.mozilla.org/en-US/docs/Web/CSS/background) |

## Events

Custom events dispatched by the element

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

## Usage

<Tabs>
  <Tab title="JavaScript">
    ```javascript theme={null}
    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>
    ```
  </Tab>
</Tabs>