Image Control - Codenull

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:
  "https://example.com/image.jpg"
  or
  "[{ \"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 styleproperty 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 styleas follows:

{
    "border": "2px solid red",
    "borderRadius": "8px"
}

tailwindClasses

The styleproperty allows you to modify the appearance of the image using tailwind classes. More info https://tailwindcss.com/

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

​Properties

​value