如何通过image渲染单张图片_移动开发平台 mPaaS(mPaaS)-阿里云帮助中心

<image> 是蚂蚁动态卡片引擎内置的组件，用来将单张图片按照指定的样式渲染出来。

嵌入组件支持

不可嵌套任何其他组件。

样式

<image> 组件支持通用样式中的所有样式。

属性

属性	描述	值类型	默认值	可选值	写法
src	组件图片在线地址或本地地址，或 Base64 编码的数据	string		URL(“https:/xxx”) CDN 地址。 URL(“./xxx”) 离线包相对地址。 URL(“data:”) Base64 编码。	src="https://gw-office.alipayobjects.com/basement_prod/e047f6c8-dc14-481f-a22c-8dd9012b01a3.png"
resize	图片位置	string	stretch	stretch\|cover\|contain\|top\|bottom\|center\|left\|right\|top left\|top right\|bottom left\|bottom right，超出此范围为默认 cover。	resize: contain
placeholder	组件占位图的在线地址或 Base64 编码的数据	string		URL(“https:/xxx”) CDN 地址。 URL(“data:”) Base64 编码。	placeholder="https://gw-office.alipayobjects.com/basement_prod/e047f6c8-dc14-481f-a22c-8dd9012b01a3.png"

事件

<image> 组件支持通用事件中的所有事件。

示例

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

.image {
  width: 600px;
  height: 400px
}

说明

<image>组件的图片不支持 SVG 格式。
以下几种情况下载的是原图。
- resize 不为 cover/contain/stretch。
- 节点不写 width 或者 height。

单击此处 detailImage.zip 获取完整示例代码。