How to render a single image using image-Mobile Platform as a Service(mPaaS)-阿里云帮助中心

A built-in Ant Dynamic Card Engine component 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 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 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.