渲染图片
不支持
支持通用属性
| 名称 | 类型 | 默认值 | 必填 | 描述 |
|---|---|---|---|---|
| src | <uri> | - | 否 | 图片的 uri，同时支持本地和云端路径，支持的图片格式包括静态类型（png, jpg）和动态类型（gif）。支持 svg 类型图片格式（svg）1020+ |
| alt | <uri> | 'blank' 1060+ | - | 否 | 加载时显示的占位图；只支持本地图片资源。 |
注意：1060 版 alt 属性加入了新特性，详情如下：
a.如果 Image 组件没有设置 alt 值，终端会加上默认的灰色占位图。
b.src 为本地图片地址时，不会有占位图
c.src 为远程图片地址时，如果之前已经成功加载过图片，有本地缓存，则不会有占位图
d.src 为远程图片地址时，且 Image 组件 的 alt 值传入字符串 "blank" 值，不会有占位图。（可避免一些远程地址的小图标第一次加载时瞬间闪烁的现象）
e.设置 alt 为本地图片地址时，占位图缩放模式由原来的居中不缩放改为居中保持宽高比缩放，减少了占位图资源文件的分辨率与体积大小
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 | 否 | 图片的缩放类型 |
resize-mode 类型 deprecated
| 类型 | 描述 |
|---|---|
| cover | 保持宽高比缩小或放大，使得两边都大于或等于显示边界，居中显示 |
| contain | 保持宽高比，缩小或者放大，使得图片完全显示在显示边界内，居中显示 |
| stretch | 不保存宽高比，填充满显示边界 |
| center | 居中，无缩放 |
object-fit 类型 1040+
| 类型 | 描述 |
|---|---|
| contain | 保持宽高比，缩小或者放大，使得图片完全显示在显示边界内，居中显示 |
| cover | 保持宽高比，缩小或者放大，使得两边都大于或等于显示边界，居中显示 |
| fill | 不保存宽高比，填充满显示边界 |
| none | 居中，无缩放 |
| scale-down | 保持宽高比，缩小或保持不变，取 contain 和 none中显示较小的一个，居中显示 |
支持通用事件
| 名称 | 参数 | 描述 |
|---|---|---|
complete 1030+ | {width: widthValue(px), height: heightValue(px)} | 图片加载完成时触发 |
error 1030+ | - | 图片加载失败时触发 |
查看示例代码