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

# Image Control

> The Image Control is a versatile component designed to display images in your application. It supports various configurations, including custom dimensions, prev

The **Image Control** is a versatile component designed to display images in your application. It supports various configurations, including custom dimensions, preview functionality, and custom styles. Below is a detailed guide on how to use and configure this control.

## **Properties**

The **Image Control** accepts the following properties:

### **`value`**

* **Type**: `string` or `Array<{ url: string }>`
* **Description**:
  * The image source. It can be a direct URL string or an array of objects containing URLs.
  * If the input is a JSON string, it will be automatically parsed to extract the image URL.
  * Example:

    ```json theme={null}
    "https://example.com/image.jpg"
    ```

    or

    ```json theme={null}
    "[{ \"url\": \"https://example.com/image.jpg\" }]"
    ```

### **`Properties`**

* **Type**: `object`
* **Description**:
  * A configuration object to customize the appearance and behavior of the image.
  * Supported properties:
*

```
<table><thead><tr><th width="205">Property</th><th>Type</th><th>Default Value</th><th>Description</th></tr></thead><tbody><tr><td><code>width</code></td><td><code>number</code></td><td><code>100</code></td><td>The width of the image in pixels.</td></tr><tr><td><code>height</code></td><td><code>number</code></td><td><code>100</code></td><td>The height of the image in pixels.</td></tr><tr><td><code>preview</code></td><td><code>boolean</code></td><td><code>false</code></td><td>Enables or disables the image preview feature (zoom in/out).</td></tr><tr><td><code>CSS Library classes</code></td><td><code>string</code></td><td><code>""</code></td><td><a href="https://tailwindcss.com/">Tailwind CSS </a>classes to customize styles.</td></tr><tr><td><code>customStyles</code></td><td><code>JSON</code></td><td><code>""</code></td><td>Native CSS classes to modify the appearance.</td></tr></tbody></table>
```

### customStyles

The `style`property allows you to modify the appearance of the image using CSS styles. These styles are passed as a JSON object.

#### **Example**

To add a red border and rounded corners to the image, you can configure **`style`**as follows:

```json theme={null}
{
    "border": "2px solid red",
    "borderRadius": "8px"
}
```

### tailwindClasses

The `style`property allows you to modify the appearance of the image using tailwind classes. More info [https://tailwindcss.com/](https://tailwindcss.com/)

```
"border-2 border-red-500 rounded-lg"
```