The Image element represents an image in the Webflow Designer.

Properties

Property	Description	Type	Example
`id`	Unique identifier for the element composed of two identifiers, the `component` and the `element`.	`object`	`{component: "64c813...", element: "5edf8e59-71f9..."}`
`type`	Specifies the type of the element.	`string`	"Image"
`children`	Indicates whether the element can contain child elements.	`boolean`	`false`
`customAttributes`	Indicates whether the element can have custom attributes.	`boolean`	`true`
`styles`	Indicates whether the element can contain styles.	`boolean`	`true`
`textContent`	Indicates whether the element can contain text content	`boolean`	`false`

Methods

`element.getAsset()`

Retrieve an asset from an Image element.

Syntax

element.getAsset(): Promise<Asset | null>

Returns

Promise<Asset> | null

A Promise that resolves to an Asset. If an element does not have an aseet, the method will return null

Example

// Get Selected Element
const el = await webflow.getSelectedElement()

// Check if element can have children
if (el?.children) {
  // Create a new Image Element using Element Presets
  const imgEl = await el.append(webflow.elementPresets.Image)

  // Check element type
  if (imgEl.type === 'Image') {
    // Get asset from Image element
    const myAsset = await imgEl.getAsset()
    console.log(myAsset)
    }
}

Designer Ability

Checks for authorization only

Designer Ability	Locale	Branch	Workflow	Sitemode
canAccessAssets	any	any	any	any

`element.setAsset()`

Add an asset to an Image element.

Syntax

element.setAsset(asset: Asset | null): Promise<null>

Parameters

Asset: Asset - The asset to be inserted into the Image Element. Can be retrieved with the method webflow.getAssetById

Returns

Promisenull

A Promise that resolves to null

Example

// Get Selected Element
const el = await webflow.getSelectedElement()

// Check if element can have children
if (el?.children) {
  // Create a new Image Element using Element Presets
  const imgEl = await el.append(webflow.elementPresets.Image)

  // Get asset by ID
  const asset = await webflow.getAssetById(assetId)

  // Check element type
  if (imgEl.type === 'Image') {
    // Set asset as the "src" of the Image Element
    await imgEl.setAsset(asset)
  }
}

Designer Ability

Checks for authorization only

Designer Ability	Locale	Branch	Workflow	Sitemode
canAccessAssets	any	any	any	any

`element.getAltText()`

Retrieve the Alt Text for an Image element on the canvas. If the Image element does not have alt text, the API will retrieve the alt text from the associated Asset.

Syntax

element.getAltText(): Promise<string>

Returns

Promise<String>

A Promise that resolves to an the string of Alt Text.

Example

// Get Selected Element
const el = await webflow.getSelectedElement()
if (el?.type === 'Image') {
  // Get alt text
  const alt = await el.getAltText()
  console.log(alt)
} else {
  console.error('Please select an image element')
  await webflow.notify({
    type: 'Error',
    message: 'Please select an Image Element',
  })
}

Designer Ability

Checks for authorization only

Designer Ability	Locale	Branch	Workflow	Sitemode
canAccessAssets	any	any	any	any

`element.setAltText()`

Set the Alt Text for an Image element on the canvas.

Syntax

element.setAltText(altText: string | null): Promise<null>

Parameters

altText: string - The Alternate Text for an image

Returns

Promisenull

A Promise that resolves to null

Example

// Get Selected Element
const el = await webflow.getSelectedElement()

// Check element type
if (el?.type === 'Image') {
  // Set alt text. If a null is passed, the API will set the alt text as "decorative"
  await el.setAltText(altText)
  // Get alt text
  const alt = await el.getAltText()
  console.log(alt) // true
} else {
  console.error('Please select an Image Element')
  await webflow.notify({
    type: 'Error',
    message: 'Please select an Image Element',
  })
}

Designer Ability

Checks for authorization only

Designer Ability	Locale	Branch	Workflow	Sitemode
canAccessAssets	any	any	any	any