渲染图片
不支持
支持通用属性
| 名称 | 类型 | 默认值 | 必填 | 描述 |
|---|---|---|---|---|
| src | <uri> | - | 否 | 图片的 uri，同时支持本地和云端路径，支持的图片格式包括静态类型（png, jpg）和动态类型（gif）。另外，也支持 svg 类型（svg）1020+ 与 HEIF 类型（heic/heif) 1090+ 图片格式。HEIF 格式图片浏览需设备硬件支持，以及 Android 10+版本的系统 |
| alt | <uri> | 'blank' 1060+ | - | 否 | 加载时显示的占位图；只支持本地图片资源。 |
autoplay 1080+ | <boolean> | true | 否 | 控制 gif/webp 图片是否自动播放动画。值设置为 true，图片可见时自动播放，不可见时自动停止播放；值设置为 false，图片不自动播放，需要开发者调用播放接口启动动画。 |
注意：1060 版 alt 属性加入了新特性，详情如下：
a.如果 Image 组件没有设置 alt 值，终端会加上默认的灰色占位图。
b.src 为本地图片地址时，不会有占位图
c.src 为远程图片地址时，如果之前已经成功加载过图片，有本地缓存，则不会有占位图
d.src 为远程图片地址时，且 Image 组件 的 alt 值传入字符串 "blank" 值，不会有占位图。（可避免一些远程地址的小图标第一次加载时瞬间闪烁的现象）
e.设置 alt 为本地图片地址时，占位图缩放模式由原来的居中不缩放改为居中保持宽高比缩放，减少了占位图资源文件的分辨率与体积大小
注：1090 版本开始，缩放模式可以通过样式值alt-object-fit配置，默认值为cover（居中保持宽高比缩放），详情查看样式一节
1020+<circle> <clipPath> <defs> <desc> <ellipse> <g> <line> <linearGradient> <marker> <mask> <path> <polygon> <polyline> <rect> <solidColor> <stop> <svg> <switch> <symbol> <title> <use> <view>
<image>： 不支持加载外部的 SVG 文件。
<text>： 不支持 x，y，dx 和 dy 的多值形式。不支持某些其他文本功能，例如：alignment-baseline 等。
<textPath>： 与<text>相同的限制。
<tref>： 与<text>相同的限制。此外，不支持外部 href 引用。
<tspan>： 与<text>相同的限制。
<pattern>： 目前不支持 Patterned strokes。
<radialGradient>： 目前不支持 fx 和 fy 属性。
<style>： 使用了简化的 CSS 解析器，不支持整个 CSS 标准。
不支持动画和滤镜。
支持通用样式
| 名称 | 类型 | 默认值 | 必填 | 描述 |
|---|---|---|---|---|
resize-mode deprecated | cover | contain | stretch | center | cover | 否 | 图片的缩放类型 |
object-fit 1040+ | contain | cover | fill | none | scale-down | cover | 否 | 图片的缩放类型 |
filter 1090+ | blur | 0 | 否 | 图片的滤镜模式，暂时只支持 blur 模式,用法与CSSv 对齐 |
alt-object-fit 1090+ | contain | cover | fill | none | scale-down | cover | 否 | 占位图的缩放类型，仅在手动设置alt值时生效 |
注意：
filter:blur的场景下，参数值只接受px或dp长度单位值，如filter:blur(4px)；参数不支持百分比，与CSS对齐
1040+，alt-object-fit 1090+ 参数列表如下：| 类型 | 描述 |
|---|---|
| contain | 保持宽高比，缩小或者放大，使得图片完全显示在显示边界内，居中显示 |
| cover | 保持宽高比，缩小或者放大，使得两边都大于或等于显示边界，居中显示 |
| fill | 不保存宽高比，填充满显示边界 |
| none | 居中，无缩放 |
| scale-down | 保持宽高比，缩小或保持不变，取 contain 和 none中显示较小的一个，居中显示 |
deprecated 参数列表如下：| 类型 | 描述 |
|---|---|
| cover | 保持宽高比缩小或放大，使得两边都大于或等于显示边界，居中显示 |
| contain | 保持宽高比，缩小或者放大，使得图片完全显示在显示边界内，居中显示 |
| stretch | 不保存宽高比，填充满显示边界 |
| center | 居中，无缩放 |
支持通用事件
| 名称 | 参数 | 描述 |
|---|---|---|
complete 1030+ | {width: widthValue(px), height: heightValue(px)} | 图片加载完成时触发 |
error 1030+ | - | 图片加载失败时触发 |
| 名称 | 参数 | 描述 |
|---|---|---|
startAnimation 1080+ | - | 启动 gif/webp 图片的动画播放 |
stopAnimation 1080+ | - | 停止 gif/webp 图片的动画播放 |
查看示例代码
1100+在1100+版本，text、a、span组件支持image作为子组件使用
此时image组件支持的属性样式与现有的有所区别，具体如下
不支持
| 名称 | 类型 | 默认值 | 必填 | 描述 |
|---|---|---|---|---|
| id | <string> | - | 否 | 唯一标识 |
| style | <string> | - | 否 | 样式声明 |
| class | <string> | - | 否 | 引用样式表 |
| for | <array> | - | 否 | 根据数据列表，循环展开当前标签 |
| if | <boolean> | - | 否 | 根据数据 boolean 值，添加或移除当前标签 |
| src | <uri> | - | 是 | 图片的 uri，同时支持本地和云端路径，当前支持图片格式：jpg、png、webp、svg |
| alt | <string> | - | 是 | 图片加载失败时用于占位显示的文本 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
|---|---|---|---|---|
| width | <length> | - | 否 | 图片的宽度，不设置时使用图片原始的宽度 |
| height | <length> | - | 否 | 图片的高度，不设置时使用图片原始的高度 |
| align | bottom | baseline | baseline | 否 | 图片与问题的对齐方式 |
不支持
不支持