文档

image

更新时间:

<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 获取完整示例代码。

  • 本页导读 (0)