All Products
Search
Document Center

Mobile Platform as a Service:image

Last Updated:Jan 30, 2026

The <image> component is a built-in component of the Ant Dynamic Card Engine that renders a single image with specified styles.

Embedding support

This component does not support nesting other components.

Styles

The <image> component supports all styles in Common styles.

Properties

Property

Description

Value type

Default value

Valid values

Syntax

src

The online or local address of the component image, or Base64-encoded data.

string

  • URL("https:/xxx"): A CDN address.

  • URL("./xxx"): A relative address in an offline package.

  • URL("data:"): Base64-encoded data.

src="https://gw-office.alipayobjects.com/basement_prod/e047f6c8-dc14-481f-a22c-8dd9012b01a3.png"

resize

The position of the image.

string

stretch

stretch|cover|contain|top|bottom|center|left|right|top left|top right|bottom left|bottom right. If a value is outside this range, the default value cover is used.

resize: contain

placeholder

The online address or Base64-encoded data of the component's placeholder image.

string

  • URL("https://xxx"): A CDN address.

  • URL("data:"): Base64-encoded data.

placeholder="https://gw-office.alipayobjects.com/basement_prod/e047f6c8-dc14-481f-a22c-8dd9012b01a3.png"

Events

The <image> component supports all events in Common events.

Example

<image class="image" resize="contain" src="https://gw.alicdn.com/tfs/TB1dZ4WowoQMeJjy0FnXXb8gFXa-950-1267.jpg">
</image>

.image {
  width: 600px;
  height: 400px
}
Note
  • The <image> component does not support SVG images.

  • The original image is downloaded in the following cases:

    • The value of resize is not cover, contain, or stretch.

    • The width or height of the node is not specified.

Download the complete sample code: detailImage.zip.