# Image

## <mark style="color:green;">class</mark> **UI.Image**

{% hint style="info" %}
This documentation is a work in progress. UI scripting is a new feature, and additional content is still being added. Stay tuned for updates!
{% endhint %}

<table><thead><tr><th width="334">Attribute</th><th>Value</th></tr></thead><tbody><tr><td>url </td><td>valid URL <code>string</code><br><br>This value is required.</td></tr><tr><td>alt</td><td>any <code>string</code><br><br>Default: <code>"Image"</code></td></tr><tr><td>circle</td><td><code>True | False</code><br><br>Default: <code>False</code></td></tr><tr><td>shadow</td><td><code>True | False</code><br><br>Default: <code>False</code></td></tr><tr><td>width</td><td><p><code>%</code>, <code>px</code> or <code>auto</code> width value.</p><p><br>Examples:<br><code>"50%"</code><br><code>"75px"</code><br><code>"auto"</code></p><p><br>Default: <code>"auto"</code></p></td></tr><tr><td>height</td><td><p><code>%</code>, <code>px</code> or <code>auto</code> height value.</p><p><br>Examples:<br><code>"50%"</code><br><code>"75px"</code><br><code>"auto"</code></p><p><br>Default: <code>"auto"</code></p></td></tr><tr><td>rounded</td><td><p><code>"none"</code></p><p><code>"sm"</code></p><p><code>"md"</code></p><p><code>"lg"</code></p><p><code>"xl"</code></p><p><code>"2xl"</code><br><br>Default: <code>"md"</code></p></td></tr><tr><td>fill_type</td><td><p><code>"cover"</code></p><p><code>"contain"</code><br><br>Default: <code>"contain"</code></p></td></tr><tr><td>border_color</td><td><p>Any CSS valid color value.</p><p></p><p>See: <a href="https://www.w3schools.com/cssref/css_colors_legal.php">CSS Color Values</a></p><p><br>Examples:<br><code>"#FFFFFF"</code><br><code>"black"</code><br><code>"rgb(255, 0, 0)"</code><br><code>"hsla(0, 100%, 50%, 0.5)"</code></p><p><br>Default: <code>"#FFFFFF"</code></p></td></tr><tr><td>border_width</td><td><code>integer</code> between <code>0</code> and <code>10</code><br><br>Default: <code>0</code></td></tr><tr><td>margin</td><td>See <a href="../..#margin">Margin</a>.<br><br>Default: <code>"m-0"</code></td></tr><tr><td>visible</td><td>See <a href="../..#visible">Visible</a>.<br><br>Default: <code>True</code></td></tr></tbody></table>
