# new Image(config)
Its a Custom Web Component. Do not use the constructor directly with the new keyword. Instead, use one of the 3 following methods:
Create the Web Component and call its init method:
const myImage = document.createElement("a-image").init(config)Or use the shorthand for it:
const myImage = createImage({
src: "./logo.png",
alt: "Company logo"
})
myImage.render()Or directly declare the config inside a container component:
const myPanel = createPanel({
title: "My panel",
items: [
{
type: "image",
src: "./logo.png",
alt: "Company logo"
}
]
})
myPanel.render()Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
config |
object
|
||
src |
string
|
The image source URL |
|
alt |
string
|
<optional> |
Alternative text for the image |
caption |
string
|
<optional> |
Text to be displayed below the image |
objectFit |
string
|
<optional> |
fill (default) | contain | cover | scale-down | none |
position |
string
|
<optional> |
|
top |
string
|
<optional> |
|
left |
string
|
<optional> |
|
right |
string
|
<optional> |
|
float |
string
|
<optional> |
|
display |
string
|
<optional> |
|
width |
string
|
number
|
<optional> |
|
height |
string
|
number
|
<optional> |
|
minWidth |
string
|
number
|
<optional> |
|
minHeight |
string
|
number
|
<optional> |
|
maxWidth |
string
|
number
|
<optional> |
|
maxHeight |
string
|
number
|
<optional> |
|
margin |
string
|
<optional> |
|
padding |
string
|
<optional> |
|
border |
string
|
<optional> |
|
borderStyle |
string
|
<optional> |
|
borderWidth |
string
|
<optional> |
|
borderColor |
string
|
<optional> |
|
borderRadius |
string
|
<optional> |
|
boxShadow |
string
|
<optional> |
|
background |
string
|
<optional> |
|
backgroundColor |
string
|
<optional> |
|
zIndex |
number
|
<optional> |
|
draggable |
boolean
|
<optional> |
|
cursor |
string
|
<optional> |
|
record |
object
|
<optional> |
The record to bind the field to. This will automatically update the record when the field value changes, and the field will listen to database changes on the record. |
this
Generated markup
<a-image class="a-image">
<img class="image-content">
</a-image>Methods
# setHeight(height)
Set the image's height
Parameters:
| Name | Type | Description |
|---|---|---|
height |
*
|
A valid CSS height value |
this
# setValue(newValue, rawUpdateopt)
Set the field value
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
newValue |
string
|
The new image source URL |
|
rawUpdate |
boolean
|
<optional> |
If true, it doesn't update the associated record and doesn't trigger "change" event |
this
# setWidth(width)
Set the image's width
Parameters:
| Name | Type | Description |
|---|---|---|
width |
*
|
A valid CSS width value |
this
# updateAltText(alt)
Update the alternative text for the image
Parameters:
| Name | Type | Description |
|---|---|---|
alt |
string
|
this
# updateCaption(caption)
Update the caption of the image, if it exists.
Parameters:
| Name | Type | Description |
|---|---|---|
caption |
string
|
this