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 |
| 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 |
| 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
}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.