# Image Control

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
    "https://example.com/image.jpg"
    ```

    or

    ```json
    "[{ \"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`**&#x61;s follows:

```json
{
    "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/>

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://codenull.gitbook.io/dev/configurations/components/forms/fields/image-control.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.